HTML 表格

创建时间:2019.02.19 修改时间:2019.03.24
<table border="1">
	<caption>Titel</caption>
	<tr>
		<th>Header 1</th>
		<th>Header 2</th>
	</tr>
	<tr>
		<td>row 1, cell 1</td>
		<td>row 1, cell 2</td>
	</tr>
	<tr>
		<td>row 2, cell 1</td>
		<td>row 2, cell 2</td>
	</tr>
</table>

border 属性定义边框线条宽度。

注: 表格的边框线条包括整个表格的外边框和每个单元格的内边框。

浏览器显示效果如下:

Titel
Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

<caption> 标签定义表格的标题。

<th> 标签定义表格的表头。

表格单元格的跨列和跨行:

单元格跨两格示例:

<table border="1">
	<tr>
		<th colspan="2">Header</th>
	</tr>
	<tr>
		<td>row 1, cell 1</td>
		<td>row 1, cell 2</td>
	</tr>
</table>

浏览器显示效果如下:

Header
row 1, cell 1 row 1, cell 2

单元格跨两格示例:

<table border="1">
	<tr>
		<th>Header 1</th>
		<td rowspan="2">row 1, cell 1</td>
	</tr>
	<tr>
		<th>Header 1</th>
	</tr>
</table>

浏览器显示效果如下:

Header 1 row 1, cell 1
Header 1

定义表格的页眉、页脚和主体:

<table border="1">
	<caption>Titel</caption>
	<thead>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Footer 1</th>
			<th>Footer 2</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>row 1, cell 1</td>
			<td>row 1, cell 2</td>
		</tr>
		<tr>
			<td>row 2, cell 1</td>
			<td>row 2, cell 2</td>
		</tr>
	</tbody>
</table>

浏览器显示效果如下:

Titel
Header 1 Header 2
Footer 1 Footer 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

注:<thead><tfoot><tbody> 应作为 <table> 的子元素,出现顺序应为 <thead> 在 <tfoot> 之前,<tfoot> 在 <tbody> 之前。

可通过 CSS 定义这些元素样式,从而改变表格外观。

定义表格行格式和列格式:

定义表格中行的保护背景色:

<table border="1">
	<tr style="background-color:red">
		<th>Header 1</th>
		<th>Header 2</th>
	</tr>
	<tr style="background-color:yellow">
		<td>row 1, cell 1</td>
		<td>row 1, cell 2</td>
	</tr>
	<tr style="background-color:yellow">
		<td>row 2, cell 1</td>
		<td>row 2, cell 2</td>
	</tr>
</table>

浏览器显示效果如下:

Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

定义表格中列的背景色:

<table border="1">
    <colgroup>
        <col span="2" style="background-color:red">
        <col style="background-color:yellow">
    </colgroup>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
        <td>row 1, cell 3</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
        <td>row 2, cell 3</td>
    </tr>
</table>

浏览器显示效果如下:

Header 1 Header 2 Header 3
row 1, cell 1 row 1, cell 2 row 1, cell 3
row 2, cell 1 row 2, cell 2 row 2, cell 3