表格的基本结构
表格是网页上最常见的元素，它除了可以用来展示数据，还常常被用来排版。虽然现在提倡使用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前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。
网友评论