整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
格元素详解与练习
提到表格，大家最先想到的就是EXCEL这款软件，实际上在对表格的操作上，HTML与EXCEL非常相似。
在展示数据，统计数据方面，表格比文字描述更具表达优势，在网页中，表格也经常被用来展示数据、计划日常安排等内容。如图所示：
今天我们就来学习一下如何向页面中添加表格元素。
首先来介绍一下表格元素中的基本标签。
NO.1：<table></table>
这个标签是书写表格的第一个标签，它本身在页面上看不出什么内容，但是它的属性可以控制表格显示的全局样式。这个标签的开始标签写在表格元素的开头，结尾标签写在表格元素的结尾。
NO.2：<caption></caption>
这个标签是表格的标题标签。
NO.3：<tr></tr>
这个标签定义表格的列标签。
NO.4：<th></th>
这个标签是列表标题标签，例如，男生、女士、姓名等。
NO.5：<td></td>
这个标签定义表格的行标签。
OK，这些基本标签就可以构建一个基础的表格元素。示例代码如下：
<table><!-- 写在表格元素的开头 --><caption>表格标题</caption><!-- 表格标题 --><tr>标题标签<th>姓名</th><!-- 标题标签 --><th>年龄</th></tr><tr><td>一列一行</td><td>一列二行</td></tr><tr><td>二列一行</td><td>二列二行</td></tr></table><!-- 写在表格元素的结尾 -->
页面效果如图所示：没有表格的外边框。
如何添加外边框呢？在<table>标签中修改border属性即可，示例代码如下：border="1"是给表格添加宽为1的边界线。
<table border = "1"><!-- border="1"是给表格添加宽为1的边界线 -->效果如图所示：
这时，您会发现表格在页面上的尺寸非常小，可不可以按照页面尺寸来显示表格吗？当然可以，这就需要为<table>标签修改第二个属性width，示例代码如图所示：width = "100%"指的是表格宽度与平面宽度一致。
<table border = "1" width = "100%"><!-- width = "100%"指的是表格宽度与平面宽度一致 -->效果如图所示：
ok！今天的讲解先到这里，明天我会继续为大家讲解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三个标签，以及合并单元格操作。
今天的完整代码示例如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body><h1>第一个网页</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%">
<caption>表格标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr><td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body>
</html>正所谓万丈高楼平地起，html技术虽然简单，但是内容相对繁琐，也是以后进一步学习网页制作的基础，希望大家动手写每一段代码，把每一步踩坚实。
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
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，我们一起飞！
篇讲了CSS，知道CSS是用来控制HTML元素的表现样式的。今天就来实践一下，相信你经常会在网页里看到表格，看CSS如何来控制表格元素（<table>）的样式的。
用过Excel的应该都很容易理解表格这个概念，无非就是行、列、单元格等。网页中的表格也是这样，只不过是使用HTML代码来表现的，<table></table>是表格的壳，<tr></tr>是表格内部的行，<td></td>是表格中的单元格，代码是这样写的：
<!DOCTYPE html> <html> <head> <title>我的第一个表格</title> </head> <body> <table border="1"> <tr> <td>姓名</td> <td>性别</td> </tr> <tr> <td>大超</td> <td>男</td> </tr> </table> </body> </html>
通过上面的代码可以看出，<tr>标签包含在<table></table>里面，<td>标签又包含在<tr></tr>里面。也就是说表格要先有一个外壳<table></table>，然后需要在里面放进去行<tr></tr>，再在行里面放进去单元格<td></td>，最后在单元格里面放内容。上面的代码中有两组<tr>，说明是两行，每行里面又有两组<td>，说明每行有两个单元格，也就是两列，这就形成一个两行两列的表格了。
常用的有以下几个：
如果你想控制表格的宽度，代码就是table {width:500px;}。如果你想控制表格的边框宽度就是table {border:1px;}。甚至还可以加上边框颜色table {solid red 1px;}，“solid”是实线的意思，当然还有虚线。
在CSS里面，直接给table这个元素定义样式时，网页内所有的table都会变成你所定义的样子。人人都希望个性化，表格也一样，单独把某个表格设置一种样式时怎么办呢？这就用到自定义样式，如果你想给某个table单独设置一种样式，你先要给样式起个名字，比如：gexing，在CSS里面是这样写的“.gexing{solid red 5px;}”，然后在table里面加个class：<table class="gexing">，哪个表格想用这个样式就在哪个表格里加上这个class，可以重复使用。
不过看着上面这个表格有点难看啊，我在网上看到的表格都是细细的边框，你这个表格的边框怎么还有两条线？这个问题是个好问题，你说的是不是下图的最后一个？
这个就当作业吧，看看你能不能做出来。如果做不出来，可以关注公众号“大超小志”发送“大超教你建网站6”收取本节课全部代码，有不懂的可以在公众号留言。
*请认真填写需求信息，我们会在24小时内与您取得联系。
