HTML 表格<table>的使用

表格用table表示 表格中每一行用tr 一行中的每一列用td表示

例如一个三行两列的表格：

<table>

<tr>

<td>第一行第一列</td>

<td>第一行第二列</td>

</tr>

<tr>

<td>第二行第一列</td>

<td>第二行第二列</td>

</tr>

<tr>

<td>第三行第一列</td>

<td>第三行第二列</td>

</tr>

</table>

th 表示的是表头 表头中的文字默认为加粗居中 th要放在tr中用于替换td,例如：

<table>

<tr>

<th></th>

<th></th>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

table 的常用属性

1.border属性 

给表格加边框 默认给所有的td加边框 并且给整个table加外边框 当增大border的值的时候 td 的边框不变 只有最外的变宽

<table border="10"></table>

2.cellspacing属性 

表示的是单元格与单元格之间的距离 注意cellspacing＝“0” 单元格与单元格之间没有距离 但是边框线的宽度依然是两条线的宽度

表格边框合并的 css 写法 ：style="border-collapse: collapse;

  这条css 与cellspacing有什么区别？

cellspacing＝“0”仅仅是将单元格之间的距离调整为0，但是单元格之间还是两条线

而style="border-collapse: collapse; 是将表格相邻的两条边框合并处理，只有一条线存在。一旦边框合并 cellspacing属性将会失效

3.cellpadding属性 单元格边框与单元格中的文字的距离

4.height:表格的高度 width:表格的宽度

<table height="100px" width="100px"></table>

<table style="height: 100px;width: 100px;"></table>（CSS写法）

5.align属性  

设置表格整体在浏览器的位置，已经被淘汰了，不建议使用。

可选值：left center right

6.bgcolor 背景色

bgcolor="red"

7.bordercolor 边框颜色

bordercolor="blue"

8.background 背景图 背景色和背景图同时存在时 背景图会覆盖背景色

background="img/computer.jpg"

<tr>与<td>常用属性

1.

  width:单元格宽度

  height:单元格高度

  当你改变了一行或者

2.bgcolor属性 单元格的背景颜色 

<table bgcolor="aqua">

<tr bgcolor="blue">

<td bgcolor="black"></td>

</tr>

</table>

最里面的覆盖外面的

3. align属性 设置单元格中文字水平对其方式，默认局左

可选值：left center right

4.valign属性 设置单元格中文字垂直对其方式，默认局中

可选值：top middle（center） bottom 上 中 下

5.nowrap属性 nowrap="nowrap"

当单元格文字过多时，设置单元行文字不断行显示，但是会把表格的宽度撑大

表格的跨行与跨列

1.跨列：在td上使用属性colspan="n"进行跨列。如果一个单元个跨n列，则单元格右边的n－1个单元格要去掉。

2.跨行：在td上使用属性rowspan="n"进行跨行。 如果一个单元个跨n行，则单元格下边的n－1个单元格要去掉。

HTML <table> 标签