表格的基本结构
表格是网页上最常见的元素, 它除了可以用来展示数据, 还常常被用来排版. 虽然现在提倡使用 DIV+CSS 完成页面布局, 但表格框架简单明了, 对于繁杂的数据, 一个简洁的表格能让其展现的极有条理.
简单来说, 表格是由行, 列 (单元格) 组成. 表格由 <table> 标签来定义. 每个表格均有若干行 (由 <tr> 标签定义), 每行又由若干单元格(即列, 由 <td> 标签定义) 组成. 表格单元格里可以包含文本, 图片, 列表, 段落, 表单, 水平线, 表格 (嵌套) 等等.
别罗嗦, 看代码.
下面的代码是一个两行两列的表格.
- <!DOCTYPE html>
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- </title>
- </head>
- <body>
- <table>
- <!-- 表格开始 -->
- <tr>
- <!-- 表格第一行 -->
- <td>
- 姓名
- </td>
- <!-- 第一行第一个单元格 -->
- <td>
- 张三
- </td>
- <!-- 第一行第二个单元格 -->
- </tr>
- <tr>
- <!-- 表格第二行 -->
- <td>
- 民族
- </td>
- <!-- 第二行第一个单元格 -->
- <td>
- 汉族
- </td>
- <!-- 第二行第二个单元格 -->
- </tr>
- </table>
- <!-- 表格结束 -->
- </body>
- </HTML>
表格默认是没有边框的, 下面的效果图加入了边框, 目的是能让表格的结构更清晰.
image
表格的标准结构
表格除了行 < tr > 和单元格 < td>, 还可以有标题 < caption > 和表头 < th>. 另外, 表格的语义化还将表格分为表格页眉 < thead>, 表格主体 < tbody>, 表格页脚 < tfoot > 三个部分. 引入语义化, 能够让表格结构更清晰, 代码语义更良好.
下面的示例代码加入了标题和表头, 同时引入了表格语义化, 将表格分为页眉, 主体. 页脚三个部分, 表格语义化是否添加不会影响到表格的显示效果.
- <!DOCTYPE HTML>
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- </title>
- </head>
- <body>
- <table>
- <!-- 表格开始 -->
- <caption>
- 第一学期学生成绩表
- </caption>
- <!-- 表格标题 -->
- <thead>
- <!-- 表格页眉 -->
- <tr>
- <!-- 第一行 -->
- <th>
- 姓名
- </th>
- <!-- 表头 -->
- <th>
- 语文
- </th>
- <th>
- 数学
- </th>
- <th>
- 物理
- </th>
- </tr>
- </thead>
- <tbody>
- <!-- 表格主体 -->
- <tr>
- <!-- 第二行 -->
- <td>
- 张小明
- </td>
- <td>
- 80
- </td>
- <td>
- 90
- </td>
- <td>
- 80
- </td>
- </tr>
- <tr>
- <!-- 第三行 -->
- <td>
- 王小花
- </td>
- <td>
- 90
- </td>
- <td>
- 70
- </td>
- <td>
- 80
- </td>
- </tr>
- </tbody>
- <tfoot>
- <!-- 表格页脚 -->
- <tr>
- <!-- 第四行 -->
- <td>
- 平均分
- </td>
- <td>
- 85
- </td>
- <td>
- 80
- </td>
- <td>
- 80
- </td>
- </tr>
- </tfoot>
- </table>
- <!-- 表格结束 -->
- </body>
- </HTML>
表格默认是没有边框的, 下面的效果图加入了边框, 目的是能让表格的结构更清晰.
image
表格的行, 列合并
在表格的实际应用中, 经常需要将表格相邻的两个或多个单元格合并, 以满足不同长度或不同类型的数据展示.
- <td>
- 标签的[rowspan] 属性可以实现合并行,
- <td rowspan="合并的行数">
- <td>
- 标签的[colspan] 属性可以实现合并列,
- <td colspan="合并的列数">
示例代码:
- <!DOCTYPE HTML>
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- </title>
- <style type="text/css">
- /* 设置图片的宽和高, 防止将表格撑变形 */ img {width:76px; height:82px;}
- </style>
- </head>
- <body>
- <table>
- <tr>
- <!-- 第 1 行 -->
- <td>
- 姓名:
- </td>
- <td>
- 小叮当
- </td>
- <!-- 下面是合并两行 -->
- <td rowspan="2">
- <img src="小叮当. jpg" />
- </td>
- </tr>
- <tr>
- <!-- 第 2 行 -->
- <td>
- 作品:
- </td>
- <td>
- 哆啦 A 梦
- </td>
- </tr>
- <tr>
- <!-- 第 3 行 -->
- <td>
- 简介:
- </td>
- <!-- 下面是合并两列 -->
- <td colspan="2">
- 来自一部漫画作品
- </td>
- </tr>
- </table>
- </body>
- </HTML>
- </pre>
表格默认是没有边框的, 下面的效果图加入了边框, 目的是能让表格的结构更清晰.
image
表格的 CSS 样式
表格默认是没有边框的, 我们可以使用 border 属性为 table 设置边框. 上面的代码都是加入边框, 可以看到, 表格都是双线条边框, 这是由于 table,th 以及 td 元素都有独立的边框.[border-collapse] 属性可以设置是否把表格边框合并为单一的边框, 该属性的取值主要有两个, 值[separate] 为默认值, 表示边框分开不合并, 值[collapse] 为合并边框.
当表格的边框属性[border-collapse] 的值为默认值[separate] , 即边框分开时, 我们还可以利用属性[border-spacing] 来设置相邻单元格的边框间的距离. 该属性可以设置一个或两个像素值, 当设置一个像素值时, 表示水平和垂直间隔为同一值; 如果设置了两个值, 则第一个为水平间距, 第二个为垂直间距.
示例代码:
- <!DOCTYPE HTML>
- <HTML lang="en" xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta charset="utf-8" />
- <title>
- </title>
- <style type="text/css">
- /* 为表格设置边框样式 */ table,th,td{border:1px solid red;} table.one { /* 设置第一个表格为合并边框
- */ border-collapse: collapse; } table.two { /* 设置第二个表格为分离边框, 同时设置水平间距 10px,
- 垂直间距 50px*/ border-collapse: separate; border-spacing: 10px 30px }
- </style>
- </head>
- <body>
- <table class="one">
- <tr>
- <td>
- 单元格 1
- </td>
- <td>
- 单元格 2
- </td>
- </tr>
- <tr>
- <td>
- 单元格 1
- </td>
- <td>
- 单元格 2
- </td>
- </tr>
- </table>
- <br />
- <table class="two">
- <tr>
- <td>
- 单元格 1
- </td>
- <td>
- 单元格 2
- </td>
- </tr>
- <tr>
- <td>
- 单元格 1
- </td>
- <td>
- 单元格 2
- </td>
- </tr>
- </table>
- </body>
- </HTML>
image
自己整理了一份最全前端学习资料, 从最基础的 HTML+CSS+JS [炫酷特效, 游戏, 插件封装, 设计模式]到移动端 HTML5 的项目实战的学习资料都有, 送给每一位前端小伙伴. 企鹅裙: 685910553(前端资料分享). 有想学习 web 前端的, 或是转行, 或是大学生, 还有工作中想提升自己能力的, 正在学习的小伙伴欢迎加入学习.
来源: http://www.jianshu.com/p/75479de0512d