TML 表格实例:
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |
Adam | Johnson | 67 |
在线实例
表格
这个例子演示如何在 HTML 文档中创建表格。
HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格实例
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下::
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
HTML 表格和边框属性
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
使用边框属性来显示一个带有边框的表格:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML 表格表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本:
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下:
Header 1 | Header 2 |
---|---|
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
更多实例
没有边框的表格
本例演示一个没有边框的表格。
表格中的表头(Heading)
本例演示如何显示表格表头。
带有标题的表格
本例演示一个带标题 (caption) 的表格
跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。
表格内的标签
本例演示如何显示在不同的元素内显示元素。
单元格边距(Cell padding)
本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
单元格间距(Cell spacing)
本例演示如何使用 Cell spacing 增加单元格之间的距离。
HTML 表格标签
标签 | 描述 |
---|---|
<table> | 定义表格 |
<th> | 定义表格的表头 |
<tr> | 定义表格的行 |
<td> | 定义表格单元 |
<caption> | 定义表格标题 |
<colgroup> | 定义表格列的组 |
<col> | 定义用于表格列的属性 |
<thead> | 定义表格的页眉 |
<tbody> | 定义表格的主体 |
<tfoot> | 定义表格的页脚 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
用于呈现逻辑上并列的具有相关性的数据内容.
<ul>
<li></li>
</ul>
disc: 实心圆点
circle: 空心圆圈
square: 实心正方形
<ol>
<li></li>
</ol>
1: 阿拉伯数字
i: 小写罗马数字
I: 大写罗马数字
A: 大写字母
a: 小写字母
适用呈现包含主题及描述的数据内容.
<dl>
<dt>主题</dt>
<dd>描述</dd>
</dl>
表格
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
thead: 表头
tbody: 表体
tfoot: 表脚
th: 专用于表头中的单元格, 其具有自动加粗并且居中的效果.
表格的属性控制:
border: 边框
bordercolor: 边框颜色
width: 宽度
height: 高度
cellspacing: 单元格间距(外)
cellpadding: 单元格填充(内)
align: 表格的位置控制
单元格的属性控制:
align
valign
如何合并单元格/跨行或跨列?
<td rowspan="number" colspan="number">
注意: 合并后, 会引发单元格数量的减少!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我的电脑文件列表</h1>
<ul>
<li>我的电脑
<ul>
<li>本地磁盘(C:)
<ul>
<li>我的文档</li>
<li>我的收藏</li>
</ul>
</li>
<li>本地磁盘(D:)
<ul>
<li>我的游戏</li>
<li>我的资料</li>
<li>我的电影</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
格是页面中常见的一中标签,通常是用来数据展示的,而不是用来布局。
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
设置表格的外观样式
<table border=1>
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<th>张三</th>
<td>女</td>
<td>18611110000</td>
</tr>
<tr>
<th>李四</th>
<td>男</td>
<td>18711110000</td>
</tr>
<tr>
<th>王五</th>
<td>男</td>
<td>18811110000</td>
</tr>
</table>
表格标题标签,为表格添加标题,跟随表格的位置而移动。设置标题,我们用的是caption标签。
<table border="1">
<caption style="text-align:left">My savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
将标题定位在表格的左|右|上|下位置。
跨行合并 rowspan=“合并单元格的个数”
跨列合并 colspan=“合并单元格的个数”
合并顺序:先上后下,先左后右
...
姓名 | 张三 | 性别 | 李四 | 照片 |
家庭住址 | 张三 | 性别 | 李四 | 照片 |
```
(1)先确定是跨行还是跨列合并
(2)根据先上后下,先左后右的原则,找到目标单元格,写上合并方式(rowspan/colspan)和要合并的单元格数量
(3)删除多余的单元格
表格的结构划分,使用thead、tbody 、tfoot 三种标签
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>0</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
</tbody>
</table>
(1) 元素内部必须包含一个或者多个 标签。
(2) thead, tbody, 和 tfoot 元素默认不会影响表格的布局。用途主要是可以使用 CSS 来为这些元素定义样式,从而改变表格的外观。
*请认真填写需求信息,我们会在24小时内与您取得联系。