[HTML/HTML5]8使用表格

8.1  创建基本的表格结构

8.1.1  表格结构

　　HTML表格包含4种基本元素：

• table：在HTML中table元素是一个容器，其中包含用于创建表格的其它的元素；
• tr：表示表格中的行，开始标记和结束用于包围该行的单元格；
• td：表示表格中的数据，在表格中用于包含单元格实际的内容，开始标记和结束标记用于表示行中的一个单元格；
• th：表示表格头，它是一个可选标记，用于代替td标记，th标记用于定义一个包含表格头信息的单元格。

8.1.2  单元格内容

　　在表格的单元格中，几乎可以包含Web页面能呈现的任何类型的内容。对于指定的单元格，单元格的内容应该放在开始标记 和结束标记之间。所有用于格式化内容的标记也应该包含在和标记之间。

　　要在表格中包含无内容的空单元格，请在单元格的和标记之间输入非换行空格（ ）字符作为其内容，此时单元格将显示为空白。

　　默认情况下，每一个单元格的大小将随着单元格内容的多少而变化。在显示一定数量的字符之后，浏览器可能会对内容进行换行（wrap）显示，即停止在当前行上显示内容，并从下一行继续显示其余内容。只有当表格碰到页面的另一个元素，或者达到浏览器的边缘时，才会发生换行的情况。在不同的浏览器中，对内容进行换行的默认位置可能会有所不同。

　　（1）单元格中的文本

　　在每一个单元格中，都可以使用前面学过的HTML元素来定制单元格中的文本。例如，可以使用strong元素添加强调，使单元格中的文本以粗体显示。

　　如果想使每一个单元格中的文本都具有相同的特征，最好的解决方案是使用样式表并将td标记作为选择器。

　　（2）单元格中的图像

　　对于HTML表格，还可以在其单元格中添加图像。只需在想显示图像的单元格中使用img元素添加对图像的引用即可。

8.2  格式化Web页面中的表格

8.2.1  边框和外边距

　　根据表格的设计，本质上它具有内边框和外边框。默认情况下，绝大多数浏览器将边框跨度设置为0，从而使边框看不见。但是，对于统计信息的表格，边框非常有用。例如，人们需要看到不同的列，才能更好地理解表格中的数据。在表格中使用边框的关键，在于理解与它有关的三个属性。

　　（1）table标记的border属性

　　即使最终想使表格的边框不可见，但在创建表格时，查看表格组成情况的一个好办法，就是暂时打开所有的表格边框。只需在

1 <table border="1">

　　（2）样式表中的border属性

　　还可以在样式表中使用border属性来定义表格边框的样式，包括border-width、border-style、border-color属性。当需要消除或定制单元格之间的间距时，border-collapse和border-spacing属性将非常有用。border-collapse属性可以按照以下两种方式使用：

• border-collapse：collapse   关闭单元格边框之间的所有边距
• border-collapse：seperate  保持单元格边框之间的间距

　　当把border-collapse属性设置为seperate时，可以继续使用border-spacing属性精确指定单元格之间应该包含多少间距：

1 table {border-collapse:seperate; border-spacing:10px 5px;}

　　（3）间距属性

　　在样式表中还可以使用padding属性和margin属性来定义围绕单元格四周的间距。注意，整个表格既可以使用padding属性也可以使用margin属性来定义样式，但对于单个单元格只能使用padding属性，不能使用margin属性。

8.2.2  宽度和高度

　　当在页面中添加表格时，使用样式表属性width和height来定义表格的尺寸。如果没有声明表格的尺寸，浏览器将根据每一个单元格中内容的数量以及在浏览器窗口中可用空间的大小来确定表格的尺寸，这可能会使表格的显示与预期不相符。

　　在本例中，将表格的宽度和高度定义为绝对尺寸，这样一来当浏览器窗口变大或缩小时，该表格的尺寸都不会发生改变。

1 table {width: 200px; height: 200px; border: 3px solid black;}

　　另一个方面，如果不关心表格的精确尺寸，但希望表格只占浏览器窗口50%的空间，而不会超出这个比例，那么可以使用百分比来定义表格的width和height属性：

1 table {width: 50%; height: 50%; border: 3px solid black;}

8.2.3  基本对齐方式

　　可以使用float属性使图片或表格与周围文本的左侧或右侧对齐，如果页面中只有一个表格，就可以使用table元素作为选择器。

1 table {float: right;}

8.2.4  表格的颜色

　　要改变整个表格的背景颜色，使用table标记作为选择器并在样式表中添加background-color属性即可。

1 table {background-color: yellow;}

8.2.5  表格的背景图像

　　可以将background-image属性添加到样式表中，以便将一幅图像作为整个表格的背景。当把background-image属性应用于表格时，它的工作原理与将其应用于其他Web页面对象是一样的。即背景图像将自动地从左到右、自上而下地重复进行填充。 如果需要，也可以利用之前学过的其它背景属性改变重复填充的选项（如background-repeat和background-attachment属性）。

1 table {background-image: url('e://Image/test.png');}

8.2.6  表格的标题

　　caption元素用于为表格指定标题，它并不是table元素的一个属性，而是一个独立的元素。caption元素用在表格的开始标记

• text-align：用于定义标题文本是左对齐、右对齐，还是居中对齐，无论表格标题放在表格的哪一边；
• caption-side：用于指定将表格标题放在表格的哪一边（top、right、bottom或left）。

1 caption {text-align: right; caption-side:bottom;}

8.3  格式化表格单元格中的内容

　　除了可以定义整个表格的样式之外，还可以为表格中每一个单元格分别定义样式。可以改变单元格的对齐方式、宽度、高度和背景颜色，还可以限制单元格中的换行、使单元格中的内容跨越多行或多列。

8.3.1  对齐方式

　　要改变垂直或水平对齐方式，可以在tr、th或td标记中添加text-align属性以设置水平对齐方式，添加vertical-align属性以设置垂直对齐方式。

• tr：在

1 <table border="1">
2 <colgroup span="5" id="group1">colgroup>
3 <colgroup span="2" ic="group2">colgroup>
4 <tr>
5     <td>

神話南帝冫

这个家伙很懒，什么也没留下！

Tags | 热门标签

• get
• request
• triggers
• scala
• hash
• tree
• vbscript
• python2
• settings
• list
• metadata
• fetch
• bash
• int
• header
• dll
• export
• 数组
• utf-8
• case
• node.js
• input
• erlang
• sum
• ascii
• timestamp
• less
• regex
• php7
• js

RankList | 热门文章

• 1关于yum:Gartner-APM-魔力象限技术解读全量存储-No-按需存储YES
• 2vux flexbox使用_如何使用Flexbox建立专业网站
• 3Kubernetes(K8S学习第一天)
• 4poj3076(16*16数独)
• 5android 粘性view_Android自定义StickinessView粘性滑动效果
• 6设计模式学习（二十）状态模式
• 7java基础_大数据JAVA基础第九天
• 8js格式化日期时间工具类
• 9开发笔记:HDU5332(前缀和优化dp/CDQ+NTT)
• 10NPM你真的会吗？(一)
• 11钉钉直播没声音什么情况？钉钉直播没声音的解决方法
• 12mysql的备份与还原，安装(window)
• 13【Redis专题】管理Redis进程的Shell脚本
• 14Promethus快速监控Nginx
• 15可能会|人类_程序员架构修炼之道：如何设计“易理解”的系统架构？

PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有
     

1 .left {text-align: left; vertical-align: top;}
2 .right {text-align: right; vertical:bottom;}
3 .center{text-align: center; vertical:middle;}

1 th {width: 33%;}

1 td {padding: 10px;}

1 tr {background-color: green;}

1 td {white-space: nowrap;}

1 <td colspan="2">Hello,worldtd>

1 <td rowspan="2">Hello,worldtd>

 1 <table border="1">
 2     <thead>
 3         <tr>
 4             <th>Ageth>
 5             <th>Heightth>
 6             <th>Weightth>
 7         tr>
 8     thead>
 9     <tfoot>
10         <tr>
11             <td colspan="3">Data Taken from the Corinna Research Societytd>
12         tr>
13     tfoot>
14     <tbody>
15         <tr>
16             <td>Birthtd>
17             <td>19.5 inchestd>
18             <td>7 lbs. 9 oz.td>
19         tr>
20     tbody>
21 table>

1 body {font-family: verdanna;}
2 thead {background-color: black; color: white;}
3 tbody {background-color: #ccc;}
4 tfoot {font-size: 10pt; font-style: italic;}