整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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，我们一起飞！
lt;thead>标签定义HTML中<table>元素的标题；
<thead>标签与<tbody>和<tfoot>标签一起使用，它们定义HTML表格中的表头，表主体和表脚。
<thead>标签作为<table>标签的子元素，需出现在<caption>、<colgroup>元素之后；<tbody>，<tr>或<tfoot>元素之前。
<thead>标记内应至少包含一行<tr>元素。
提示：<thead>、<tbody>和<tfoot>元素默认不会影响表格的布局。不过可以使用CSS来为这些元素定义样式，从而改变表格的外观。
<thead>
<tr>……</tr>
<thead>
<table border="1">
<caption>图书大厦书目价格单</caption>
<thead>
<tr>
<th>书名</th>
<th>单价</th>
</tr>
</thead>
<tr>
<td>HTML入门教程</td>
<td>79.00元</td>
</tr>
<tr>
<td>JavaScript基础教程</td>
<td>46.00元</td>
</tr>
<tr>
<td>Python精品教程</td>
<td>99.00元</td>
</tr>
</table> 123456789101112131415161718192021复制代码类型：[html]图书大厦书目价格单 | |
书名 | 单价 |
HTML入门教程 | 79.00元 |
JavaScript基础教程 | 46.00元 |
Python精品教程 | 99.00元 |
在HTML5中，不再支持HTML4.01中<thead>标签的任何属性。
所有主流浏览器都支持<thead>标签。
属性 | 值 | 描述 |
align | right | HTML5 不支持。定义 <thead> 元素中内容的对齐方式。 |
char | character | HTML5 不支持。规定 <thead> 元素中内容根据哪个字符来对进行文本对齐。 |
charoff | number | HTML5 不支持。规定 <thead> 元素中内容的第一个对齐字符的偏移量。 |
valign | top | HTML5 不支持。规定 <thead> 元素中内容的垂直对齐方式。 |
<thead>标签支持HTML的全局属性。
<thead>标签支持HTML的事件属性。
开课吧广场-人才学习交流平台
篇文章介绍了div标签的作用，我们这篇文章主要来看下过气表格标签table的语法与使用。
在div没有出现之前，table曾是做网页的中坚力量。记得在开始学网页的时候，div是神马，我不造呀！做网页还用div吗，就只用table就可以了，各种表格嵌套加嵌套，一个网页就拼凑出来了。但table写的布局页面做维护就比较令人头痛欲裂了。因为table是一层一层嵌套，标签量冗余过多。所以修改起来就是动一发而牵全身。维护起来格外麻烦，往往是拆东墙补西墙。所以它后来就慢慢被div所替代。但是在数据列表上还是用table形式来写比较的合理，所以现在table多用于网站后台的表格数据处理中。
简单的表格由table元素以及一个或多个tr（行标签）、th（表头单元格标签）、td（普通单元格标签）等标签所组成，当然复杂的表格还包括caption（表格标题）、col(定义列)、colgroup(对表格中的列进行组合)、thead（组合表头的内容）tbody(组合表格的主题内容)、tfoot(组合表格的脚注内容)等这里我们先简单了解下即可。
定义表格：<table></table>
创建表行：<tr></tr>
创建列(单元格):<th></th>（表头）、<td></td>（表格单元）
注意：默认情况下，每行中的列数是统一的。
比如我们想创建一个姓名、年龄、分数和日期的数据表格，并设置border为1，我们可以使用table来制作。具体的表格代码如下图所示：
在网页中呈现的效果就如下图所示：
这时候有的人就会说了，为什么这个表格看起来这么奇怪，边框都是有空隙的呢？我们只需要给表格添加一些特殊的样式，即可制作一个比较漂亮好看的表格了。添加的样式代码：
在网页中呈现的效果就如下图所示：
现在我们的表格是不是看着比较的清新了，上面的css代码中为表格添加了背景、边框以及去掉了粗的边线。具体的css代码我们会在以后的课程中为大家介绍，大家在这里只需要知道并了解table标签的作用以及使用就可以了。没事可以多用table写一写表格，熟能生巧。
附赠一句经典语录：每天早上，你有两个简单的选择：是睡回笼觉，还是起身追逐 梦想 。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。
*请认真填写需求信息，我们会在24小时内与您取得联系。
