【html】表格标签

表格标签

表格的主要作用

Pink老师总结: 表格不是用来布局页面的,而是用来展示数据的

表格的基本语法

<table>
 	<tr>
 		<td>单元格内的文字</td>
 		...
 	</tr>
 	...
</table>

1. < table > < /table > 是用于定义表格的标签。
2. < tr > < /tr > 标签用于定义表格中的行，必须嵌套在 < table > < /table >标签中。
3. < td > < /td > 用于定义表格中的单元格，必须嵌套在< tr>< /tr >标签中。
4. 字母 td 指表格数据（table data），即数据单元格的内容。

表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.
< th > 标签表示 HTML 表格的表头部分(table head 的缩写)

<table>
 	<tr>
 		<th>姓名</th>
 		...
 	</tr>
 	...
</table>

表格属性

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或 “”	规定表格单元格是否拥有边框，默认为“”，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素。
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

表格结构标签

1. < thead >< /thead >：用于定义表格的头部。< thead > 内部必须拥有 < tr > 标签。 一般是位于第一行。
2. < tbody >< /tbody >：用于定义表格的主体，主要用于放数据本体 。
3. 以上标签都是放在 < table>< /table > 标签中。

合并单元格

合并单元格方式：
1. 跨行合并：rowspan=“合并单元格的个数”
2. 跨列合并：colspan=“合并单元格的个数”

目标单元格：
1. 跨行：最上侧单元格为目标单元格
2. 跨列：最左侧单元格为目标单元格

合并单元格三步曲：
1. 先确定是跨行还是跨列合并。
2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比 如：< td colspan=“2” >< /td >。
3. 删除多余的单元格。