table表格

标签

• <table></table>最外层

• <tr></tr>行

• <th></th>头部

• <td></td>单元格

• <thead></thead>
  和th不一样，th是语义化，而thead是正真的头部，th必须写在第一行才是头部，thead不论写在哪都是头部，下面给两个表格显示是一样的，thead写在td之后任然是头部

<table>
	<tr>
		<th>头</th>
	</tr>
	<tr>
		<td>单元格</td>
	</tr>
</table>
<table>
	<tr>
		<td>单元格</td>
	</tr>
	<tr>
		<thead>头</thead>
	</tr>
</table>

• <tfoot></tfoot>尾部，和thead一样，不论写在哪他都是尾部
• <tbody></tbody>和thead，tfoot一样

可以
<tr>
	<thead></thead>
</tr>
也可以
<thead>
	<tr>
		<td></td>
	</tr>
</thead>
<tbody>
	<tr>
		<td></td>
	</tr>
</tbody>
<tfoot>
	<tr>
		<td></td>
	</tr>
</tfoot>

• <caption></caption>表格标题

<caption>Monthly savings</caption>

• <colgroup></colgroup>和<col></col>列

两者搭配使用可以单个/批量选择特定的列，为其添加特定的style
<colgroup>
	//选择前两列，赋红色
	<col span="2" style="background-color: red;">
	</col>
	//默认往后再选一列，赋绿色
	<col style="background-color: green;">
	</col>
</colgroup>

属性样式

• 边框

<table border="1"></table>

• 合并行colspan与合并列rowspan

<h4>单元格跨两列:</h4>
<table border="1">
	<tr>
		<th>Name</th>
		<th colspan="2">Telephone</th>
	</tr>
	<tr>
		<td>Bill Gates</td>
		<td>555 77 854</td>
		<td>555 77 855</td>
	</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
	<tr>
		<th>First Name:</th>
		<td>Bill Gates</td>
	</tr>
	<tr>
		<th rowspan="2">Telephone:</th>
		<td>555 77 854</td>
	</tr>
	<tr>
		<td>555 77 855</td>
	</tr>
</table>

• 表格与其他标签组合使用

<table border="1">
	<tr>
		<td>
			<p>这是一个段落</p>
			<p>这是另一个段落</p>
		</td>
		<td>这个单元格包含一个表格:
			<table border="1">
				<tr>
					<td>A</td>
					<td>B</td>
				</tr>
				<tr>
					<td>C</td>
					<td>D</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>这个单元格包含一个列表
			<ul>
				<li>apples</li>
				<li>bananas</li>
				<li>pineapples</li>
			</ul>
		</td>
		<td>HELLO</td>
	</tr>
</table>

• 单元格内的空白区域cellpadding，类似padding

<h4>没有单元格边距:</h4>
<table border="1">
	<tr>
		<td>First</td>
		<td>Row</td>
	</tr>
	<tr>
		<td>Second</td>
		<td>Row</td>
	</tr>
</table>

<h4>有单元格边距:</h4>
<table border="1" cellpadding="20">
	<tr>
		<td>First</td>
		<td>Row</td>
	</tr>
	<tr>
		<td>Second</td>
		<td>Row</td>
	</tr>
</table>

• 单元格之间的间距cellspacing（合并边框）

<h4>没有单元格间距:</h4>
<table border="1">
	<tr>
		<td>First</td>
		<td>Row</td>
	</tr>
	<tr>
		<td>Second</td>
		<td>Row</td>
	</tr>
</table>

<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
	<tr>
		<td>First</td>
		<td>Row</td>
	</tr>
	<tr>
		<td>Second</td>
		<td>Row</td>
	</tr>
</table>