HTML学习篇(七) 表格

HTML学习篇(七) 表格
0

<table><tr><td>

  在 HTML5 中,使用 table 标签来显示表格,tr 标签表示表格中的一行内容,而 td 标签则代表每个表格单元:

<table>
    <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>

%E5%9B%BE%E7%89%87

表格标题

  另外,一般表格的首行或者首列是作为表头标题以突出对应的行列项,可以使用 th 标签(跟 td 同级,被嵌套在 tr 中):

<table>
	<tr>
		<th>&nbsp;</th>
		<th>col1</th>
		<th>col2</th>
		<th>col3</th>
		<th>col4</th>
	</tr>
	<tr>
		<th>row1</th>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
	</tr>
	<tr>
		<th>row2</th>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
	</tr>
</table>

%E5%9B%BE%E7%89%87

单元格跨越多行或多列

  可以使用 colspan 和 rowspan 属性来为单元格设置跨越的列数或行数:

<table>
	<tr>
		<th>&nbsp;</th>
		<th>col1</th>
		<th>col2</th>
		<th>col3</th>
		<th>col4</th>
	</tr>
	<tr>
		<th>row1</th>
		<td colspan="3">1</td>
		<td rowspan="2">4</td>
	</tr>
	<tr>
		<th>row2</th>
		<td>5</td>
		<td>6</td>
		<td>7</td>
	</tr>
</table>

%E5%9B%BE%E7%89%87

  可以看到,单元格1 占据了原本单元格 2 和 3 的空间,而单元格 4 则占据了原来第二行中 8 的空间。

表格标题

  在 table 标签开头的下方添加 <caption> 即可添加表格顶部标题:

<table>
<caption>表格标题</caption>
	<tr>
		<th>&nbsp;</th>
		<th>col1</th>
		<th>col2</th>
		<th>col3</th>
		<th>col4</th>
	</tr>
	<tr>
		<th>row1</th>
		<td colspan="3">1</td>
		<td rowspan="2">4</td>
	</tr>
	<tr>
		<th>row2</th>
		<td>5</td>
		<td>6</td>
		<td>7</td>
	</tr>
</table>

%E5%9B%BE%E7%89%87

上一篇: HTML学习篇(六) 音频和视频
下一篇: HTML学习篇(八) 表单

1赞

这个学习笔记版块做得很棒诶,让我这种基础不扎实的人也能温故而知新 :stuck_out_tongue: 希望作者坚持写吖

好的,后面会继续出CSS和JS部分:yum: