基本定义及创建:
- 表格是由<table>定义
- 表格中的每行由<tr>定义
- 每行中的每列由<td>定义
例:
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
上述代码效果如下:
常用表格标签:
- 表头:
<th>heading</th>
例:
<table border="2">
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
上述代码运行效果:
- 表格标题:
<caption>title</caption>
例:
<table border="2">
<caption>
title
</caption>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
上述代码效果如下:
常用表格属性:
- 表格边框:<table border = "1">
- 当不设置边框时默认为无边框
- border的值越大,边框越粗
例:
<table border="2">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
<table border="8">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
- 跨行或跨列的表格:colspan/rowspan
<table border="2">
<caption>
title
</caption>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
<tr>
<td colspan="2">1</td>
</tr>
<tr>
<td rowspan="2">3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
</table>
- 单元格边距:cellpadding
设置单元格边距和不设置的区别
<table border="2" cellpadding="6">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<br />
<table border="2">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
- 单元格间距:cellspacing
例:
<table border="2" cellspacing="6">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<br />
<table border="2">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>