| table |
th1 |
th2 |
| tr1 |
td |
td |
| tr2 |
td |
td |
| tr3 |
td |
td |
-
标签释义
◑ <table>标签标识定义一个table
◑ <th>标签定义其表头
◑ <tr>标签定义其一行
◑ <td>标签定义其单元格内容
| 属性 |
释义 |
| border |
显示边框的线宽,不定义即无边框 |
| width |
定义其宽 |
| height |
定义其高 |
| colspan |
通过定义占几列,可横向实现合并单元格 |
| rowspan |
通过定义占几列,可纵向实现合并单元格 |
| cellpading |
单元格和内容间距 |
| cellspacing |
单元格之间间距 |
| align |
设置对齐方式 |
| frame |
属性可设置其单元格边框线的显示方式 |
-
补充
◑ 单元格内容为空<td><td>,常在中间加占位符<td> <td>
◑ 通过不同的设置方式,可实现表头水平显示即垂直显示
◑ <caption>元素可定义表格标题
◑ 表格内的标签可以是其他各种标签,以实现各种嵌套
◑ 表格和单元格通过属性bgcolor/background填充其背景颜色/图片
◑ <thead>,<tfoot>,<tbody>可设置其页眉,页脚,主体,且必须按照此顺序设置
◑ <col />,<colgroup />和其他属性结合,可对其列进行操作
◆示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="2" cellpadding="10" bgcolor="royalblue">
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<tr>
<td>内容1</td>
<td>内容2</td>
<td> </td>
</tr>
<tr>
<td colspan="2">合并1</td>
<td bgcolor="red">未合1</td>
</tr>
</table>
<table width="300" frame="box" border="1">
<caption>示例2</caption>
<col style="background-color: green;"/>
<tr>
<th>标题1</th>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<th rowspan="2">合并1</th>
<td align="right">未合1</td>
<td>未合2</td>
</tr>
<tr>
<td>未合3</td>
<td>未合4</td>
</tr>
</table>
</body>
</html>
展示图片
网友评论