1.用table标签创建一个基本表格
在table中使用tr表示表格中的一行,有几个tr就有几行。
在tr中使用td表示一个单元格,有几个td就有几个单元格。
colspan:横向的合并单元格
rowspan:纵向的合并单元格
例子:一个简单的融合col和row的表格。
<body>
<table border="1" width="50%" align="center">
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td> rowspan="2">D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td colspan="2">C4</td>
</tr>
效果图:
2.建立一个长表格
可以将一个表格分成三个部分:
头部 thead
主题tbody
底部ftoot
th 表示头部的单元格
例子:
<body>
<table border="1" width='50%' align="center">
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>300</td>
</tr>
</tfoot>
</table>
</body>
结果图
3.表格的样式设置
boder-spacing:指定边框之间的距离
border-collapse:设置边框的合并
如何设置隔行变颜色,单数行tr变颜色,基数行不变。
伪类选择器:nt-child 选中第N个元素 ,nt-child(2n)即是偶数,nt-child(2n+1)即是基数。
或者通过nth-child(odd)