整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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，我们一起飞！
. 表格属性
属性名称用途取自border-collapse设置或检索表格的行和单元格的边是合并还是独立。separate： 边框独立 collapse： 相邻边被合并border-spacing边框独立时，单元格与单元格之间的间距数字，不允许负值empty-cells设置或检索当表格的单元格无内容时，是否显示该单元格的边框。hide：隐藏该单元格的边框。 show：显示该单元格的边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格属性</title>
<style>
.separate{
width: 200px;
height: 200px;
border-collapse:separate;
border-spacing:10px;
empty-cells: hide;
}
</style>
</head>
<body>
<table border="1" class="separate">
<tr id="tr1">
<td>separate--边框独立</td>
<td>separate--边框独立</td>
<td>separate--边框独立</td>
</tr>
<tr>
<td>collapse--相邻边被合并</td>
<td>collapse--相邻边被合并</td>
<td></td>
</tr>
</table>
</body>
</html>
2. 布局属性
属性名称用途取值display设置或检索对象是否及如何显示。none： 隐藏对象。不为被隐藏的对象保留其物理空间
block： 指定对象为块元素visibility定义了元素是否可见visible： 设置对象可视 保留物理空间
hidden： 设置对象隐藏
collapse： 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。float定义了元素向左或者向右浮动放置none： 设置元素不浮动
left： 设置元素浮在左边
right： 设置元素浮在右边
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
<style>
.table{
width: 300px;
height: 300px;
background-color: red;
display: block;
}
img{
width: 300px;
height: 300px;
visibility: visible;
}
</style>
-->
<style>
.test{
width: 300px;
height: 300px;
float: right;
background-color: red;
}
.table{
width: 300px;
height: 300px;
float: right;
background-color: blue;
}
</style>
</head>
<body>
<div class="test">我将出现在屏幕右方1</div>
<div class="table">我将出现在屏幕右方2</div>
<br>
<img src="css1.jpg"/>
</body>
</html>
3. 定位属性
属性名称用途取值position指定一个元素在文档中的定位方式。static：默认。
relative:相对定位[对象遵循常规流,不会影响常规流中的任何元素]
absolute：绝对定位 [对象脱离常规流]top定义了元素的上外边距边界与其包含块上边界之间的偏移数字，不允许负值right定义了元素的右外边距边界与其包含块右边界之间的偏移数字，不允许负值bottom定义了元素的底外边距边界与其包含块底边界之间的偏移数字，不允许负值left定义了元素的左外边距边界与其包含块左边界之间的偏移数字，不允许负值z-index定义一个元素在文档中的层叠顺序数字【数值越大就会在最上面】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
<style>
#div1{
width: 200px;
height: 300px;
background-color: red;
position: absolute;
top: 100px;
}
#div2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
-->
<style>
#test1,#test2,#test3,#test4 {
position: absolute;
width: 200px;
height: 100px;
padding: 5px 10px;
color: #fff;
text-align: right;
}
#test1{
z-index: 1;
font-size: 10px;
background-color: red;
}
#test2{
z-index: 2;
font-size: 10px;
top: 30px;
left: 30px;
background-color: blue;
}
#test3{
z-index: 3;
font-size: 10px;
top: 60px;
left: 60px;
background-color: black;
}
#test4{
z-index: 4;
font-size: 10px;
top: 90px;
left: 90px;
background-color: yellow;
}
</style>
</head>
<body>
<!--
<div id="div1">
</div>
<div id="div2">
</div>
-->
<div id="test1">z-index:1</div>
<div id="test2">z-index:2</div>
<div id="test3">z-index:3</div>
<div id="test4">z-index:4</div>
</body>
</html>
变换属性设置
2D Transform Functions：
matrix()： 【矩阵变换】以一个含数值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
scale()： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
rotate()指定对象的2D rotation（2D旋转），需先有 <’’ transform-origin '> 属性的定义
3D Transform Functions：
matrix3d()： 以一个4x4矩阵的形式指定一个3D变换
translate3d()：
指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
rotate3d()： 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
scale3d()： 指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
页编程之表格样式。
同学们好，我是一名免费的少儿编程老师。今天我要分享的内容是以列为单位设置表格样式。在插入表格课程中，我已经讲解了HTML中没有单独的列标签，列是由对应的单元格组成的行形成的。虽然如此，但列这个概念仍然是存在的。
让我们来看一下今天的示例效果。这个网页上有一个3行3列的表格，其中3列分别是姓名、科目和分数，而3行分别是表头行、字体加粗的内容和两行。第一列和第二列的背景颜色是绿色，第三列的背景颜色是灰色。在一列中，每一个单元格的样式都是统一的。
接下来，让我们看看实现的代码。以列为单位设置表格样式，实际上是通过这两个标签来实现的，分别是colgroup和col。colgroup翻译过来就是“列”的意思，而colgroup则是“列主”的意思。
首先，让我们来看看colgroup标签。这个标签是一个无属性的围堵标签，它的作用只有一个，即声明这个标签内包含的是本表格列的样式。通过这个标签，我们可以向整个列应用样式，而不需要为每一个单元格或每一行设置样式。
这个标签必须在table标签内，如果有caption标签，则必须在thead标签之前使用。如果不明白各标签的先后顺序，可以看看上节课的内容。colgroup标签仅仅是声明，具体的样式是要使用col标签来实现的。col标签的数量应该与TDTH的标签数量一致，一一对应地设置。第1行的col标签对应第1列的样式，第2行的col标签对应第2列的样式，以此类推。
有些同学会问，老师，你这里的表格有三列，但是你只写了两个col标签，这时候就要讲到col标签在HTML5中的两个常用属性，一个是col属性，说明了这一行的col标签的样式可以跨几列。
例如，在这里将第一行的col标签的Span属性设置为2，这就意味着这个样式在当前位置跨了两列。换句话说，让第一列和第二列使用了同一个样式。
第二个属性是它的style标签。这个style标签的内容是CSS的一段代码，通过这个属性我们可以为列添加各种效果。严格来说，style并不是卡标签的一个专用属性，而是HTML的全局属性之一。所谓的全局属性就是只要是HTML标签都自带这一个属性。对于各位同学来说，这是一个新概念，你们只需要记住就可以了。通过使用colgroup标签和col标签的配合，我们不仅能够灵活快速地为表格添加样式，进行美化，还能大幅减少代码量，提高页面加载速度。
以上就是今天的分享，希望各位同学能够牢记在心，并在下一次练习中做到不看视频也能够写出代码。如果需要获取相关案例和文档，可以向我提问。我们下期再见。如果你对网页编程、服务端编程、数据库、算法等感兴趣，欢迎点赞、关注！
*请认真填写需求信息，我们会在24小时内与您取得联系。
