HTML 表格

最新推荐文章于 2024-11-07 15:45:53 发布

原创最新推荐文章于 2024-11-07 15:45:53 发布 · 288 阅读

1 ·

CC 4.0 BY-SA版权

前端之HTML CSS 专栏收录该内容

14 篇文章

订阅专栏

标签：

<table> 表格

<tr> 行

<td> 单元格

示例：

	<table border="1">
		<tr>
			<td>第一列</td>
			<td>第二列</td>	
			<td>第三列</td>	
			<td>第四列</td>	
		</tr>

		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>	
			<td>4</td>	
		</tr>

		<tr>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
		</tr>

	</table>

示例代码：

<body>
	<table border="1" width="500px">
		<caption>一到六</caption> <!-- 表格名 -->
		<tr>
			<th>第一列</th> <!-- 表头 -->
			<th>第二列</th>
			<th>第三列</th>
		</tr>

		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>

		<tr>
			<td>4</td>
			<td>5</td>
			<td>6</td>
		</tr>
	</table>
</body>

为了使得表格不是等表格所有元素都加载完后再显示（慢），我们使用带结构的表格。

其，将表格划分为三部分：表头、主体、脚注。

（1）thead: 表格的头（放标题等内容）

（2）tbody: 表格的主体（放数据主体）

（3）tfoot: 表格的脚（放表格的脚注）

表格属性，对表格进行样式设置：

<body>
	<table border="6" width="500px" bgcolor="pink" cellspacing="5" cellpadding="5px" align="center" frame="box" rules="rows">
		<caption>一到六</caption> <!-- 表格名 -->
		<thead>
			<tr>
				<th>第一列</th> <!-- 表头 -->
				<th>第二列</th>
				<th>第三列</th>
			</tr>
		</thead>

		<tbody>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>

			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
		</tbody>
	</table>
</body>