html表格

1.基本结构

<table>
  <tr>
  <th></th>
  <th></th>
</tr>
  <tr>
  <td></td>
  <td></td>
  </tr>
</table>

2.行标题和列标题

<table>
			<tr>
				<th></th>
				<th scope="col">Saturday</th>
				<th scope="col">Sunday</th>
			</tr>
			<tr>
				<th scope="row">Tickets sold:</th>
				<td>120</td>
				<td>135</td>
			</tr>
			<tr>
				<th scope="row">Total sales:</th>
				<td>$600</td>
				<td>$675</td>
			</tr>
		</table>

3.跨列

<table>
			<tr>
				<th></th>
				<th>9am</th>
				<th>10am</th>
				<th>11am</th>
				<th>12am</th>
			</tr>
			<tr>
				<th>Monday</th>
				<td colspan="2">Geography</td>
				<td>Math</td>
				<td>Art</td>
			</tr>
			<tr>
				<th>Tuesday</th>
				<td colspan="3">Gym</td>
				<td>Home Ec</td>
			</tr>
		</table>

4.跨行

<table>
			<tr>
				<th></th>
				<th>ABC</th>
				<th>BBC</th>
				<th>CNN</th>
			</tr>
			<tr>
				<th>6pm - 7pm</th>
				<td rowspan="2">Movie</td>
				<td>Comedy</td>
				<td>News</td>
			</tr>
			<tr>
				<th>7pm - 8pm</th>
				<td>Sport</td>
				<td>Current Affairs</td>
			</tr>
		</table>

5.长表格

		<table>
			<thead>
				<tr>
					<th>Date</th>
					<th>Income</th>
					<th>Expenditure</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>1st January</th>
					<td>250</td>
					<td>36</td>
				</tr>
				<tr>
					<th>2nd January</th>
					<td>285</td>
					<td>48</td>
				</tr>
				<tr>
					<th>30th January</th>
					<td>251</td>
					<td>15</td>
				</tr>
				<tr>
					<th>31st January</th>
					<td>129</td>
					<td>64</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td></td>
					<td>7824</td>
					<td>1241</td>
				</tr>
			</tfoot>
		</table>

使用了thead tbody tfoot

<capiton></caption> 表格名称

<table border="1"></table>给表格增加边框，只能控制最外侧边框。

<table width="300" height="300"></table>调整表格宽，高

<thead height="300"></thead> 可以调整thead高度

<thead align="left"></thead> 单元格水平对齐方式 left,center,right

<thead valign="top"></thead> 垂直对齐方式 top middle bottom

高度计算方式。table - thead-tfoot
tbody 大于上值才有更改效果

<table cellspacing="0"></table> 调整单元格边框距离。