寒假学习HTML记录5
记录内容:表格标签,表格属性标签,表格结构标签,合并单元格
表格标签
- 表格的主要作用
<table>/*表格标签*/
<tr>/*表格中的行标签*/
<th>这玩意儿是表头的单元格标签</th>
<td>这玩意儿是表格内的单元格标签</td>
</tr>
</table>
这玩意儿是表头的单元格标签 |
---|
这玩意儿是表格内的单元格标签 |
注:<th>
标签与<td>
的不同在于:表头单元格里文本内容加粗居中显示
表格属性标签
align:
属性值:left,center,right分别规定对应表格相对周围元素的左对齐,居中,右对齐。
border:
属性值:“1”或者“ ”规定表格有边框为“1”,没有为“ ”,且默认为“ ”无边框。
cellpadding:
属性值:规定单元边沿与其内容之间的空白,默认单位为1xp。
cellspacing:
属性值:规定单元格与单元格之间的空白,默认单位为xp像素,默认值为2。
width/height:
属性值:规定表格的宽/高,默认单位xp像素。
例:
<table align="center" border="1"
cellpadding="0" cellspacing="0" height="10"
><tr><th>...... </th><th>......</th></tr></table>
运行结果:
...... | ...... |
---|
表格结构标签
-
<thead></thead>
:用于定义表格的头部。<thead>
内部必须拥有<tr>
标签,一般位于第一行。 -
<tbody></tbody>
:用于定义表格的主体,主要用于放数据本体。
注:thead和tbody只是两个区域,即表格的偷不区域和表格的主体区域。
合并单元格
跨行合并:rowspan=“合并单元格的个数”
跨列合并:colspan=“合并单元格的个数”
目标单元格:
跨行:最上侧单元格为目标单元格,写合并代码。
跨列:最左侧单元格为目标单元格,写合并代码。
合并单元格的步骤
- 先确定是跨行合并还是跨列合并。
- 找到目标单元格,写上合并方式=合并的单元格数量。
- 删除多余的单元格。
例:
0 | 1 | 2 |
3 | 4 | 5 |
6 | 7 | 8 |
0 | 12 | |
36 | 4 | 5 |
7 | 8 |
面。