HTML中table表格的常用标签及属性

table表格的常用标签及属性

<table border="1" cellspacing="0" cellpadding="5">
	<caption>基本信息</caption>
	<!-- 单独给列设置样式属性 -->
    <col width="100px"> // 第一列
    <col width="100px"> // 第二列
    <col width="150px"> // 第三列
    <col width="110px"> // 第四列
    <!-- 批量给列设置样式属性 -->
    <colgroup>
        <col span="2" width="100px"> // 前两列
        <col span="1" width="150px"> // 第三列
        <col span="1" width="110px"> // 第四列
    </colgroup>
	<tbody>
		<tr align="center">
			<td>姓名</td>
			<td>年龄</td>
			<td>手机号</td>
			<td rowspan="3">照片</td>
		</tr>
		<tr align="center" valign="top" height="50px">
			<td>五</td>
			<td>18</td>
			<td>12345678901</td>
		</tr>
		<tr>
			<td colspan="3">合并列</td>
		</tr>
		<tr>
	</tbody>
</table>

效果如下

常用标签

1. <caption>：表格标题，居中在表格上方

2. <col>：单独给每列设置样式属性

3. <colgroup>：批量给列设置样式属性

常用属性

1. border
   【表格默认无边框】
   【设置了border为1px，表格有边框，但边框与边框之间默认有一定的间距】

2. cellspacing
   【设置边框与边框之间的间距，cellspacing="0"可以让边框变成单线】

3. cellpadding
   【设置单元格内填充，cellpadding=“5”，表示文字与单元格边框之间有5px的间距】

4. rowspan
   【合并行】

5. colspan
   【合并列】

6. align
   【水平方向对齐方式】

7. valign
   【垂直方向对齐方式】

8. border-collapse: collapse
   【添加单线，同cellspacing = 0】

9. empty-cells: hide;
   【隐藏空的单元格】