HTML 表格

主要格式:

1.table表示表格

2.tr表示表格的行

3.td或者th(加粗)表示表格的列(单元格)

table标签的属性:

1.width设置表格的宽度 数值或者百分比

2.border设置表格的边框

3.caption设置表格的标题

4.align设置整个表格的水平对齐方式left,center,right

5.border-color设置表格边框颜色

6.background-color: aquamarine; 设置背景颜色

7.background设置背景图片,背景图片会覆盖背景颜色

8.cellpadding设置单元格内容到边框的距离

9.cellspacing设置单元格与单元格之间的距离

10.height设置表格高度 数值或百分比

11.rules="all"合并边框线

<table align="center" cellpadding = '30px' cellspacing = '20px' rules="all"> 
 <caption>666</caption> 
 <tr> 
  <th>111</th> 
  <td>222</td> 
 </tr>
</table >

tr的属性:

1.align:left/center/right 设置一行内容的水平对齐方式

2.valign:top/middle/bottom 设置一行内容的垂直对齐方式

3.bgcolor 背景颜色

4.background 背景图

th,td单元格的属性:

1.th包裹的内容会加粗且水平居中

2.width 单元格的宽度

3.height 单元格的高度

4.align 单元格内容的水平对齐方式(取值同tr)

5.valign 单元格内容的垂直对齐方式(取值同tr)

6.bgcolor 背景颜色

7.background 背景图

th,td设置>tr设置>table设置

table标签没有valign属性

合并单元格:

1.rowspan跨行合并单元格,垂直(上下)方向合并多个单元格

2.colspan跨列合并单元格,水平(左右)方向合并多个单元格

步骤:

1.先找到要合并的单元格,改成相同的内容

2.确定是左右还是上下单元格,再决定用rowspan还是colspan,要几个单元格合成一个单元格

3.删除多余的单元格(合并的代码添加在第一个代码那里)

   Ctrl+X整行删掉,选中之后按Ctrl+X只能删掉选中的内容

结构化标签:

1.如果没有被thead,tbody,tfoot这三个结构化标签包裹的内容,默认会把所有的表格内容都放在一个tbody中

2.thead表示表格的头部

3.tbody表示表格的身体

4.tfoot表示表格的底部