html-table
2016-11-29 本文已影响55人
baiying
基本定义及创建:
- 表格是由<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>
运行结果
