表格

为什么要使用表格？——整齐，规整

　　　　在HTML文档中，广泛使用表格来存放网页上的文本和图像，进行布局。—— 使用表格显示数据，可以更直观和清晰。

　　　　在 HTML 文档中，表格主要用于显示数据。（虽然可以使用表格布局，但是不建议使用，它有很多弊端）

　　　　HTML 制作表格的原理是使用相关标记（如：表格对象 table 标记、行对象 tr、单元格对象 td ）来完成。

1. 创建普通表格

　　　　<table border="1">

　　　　　　<tr>

　　　　　　　　<td>单元格内容</td>

　　　　　　</tr>

　　　　　　<tr>

　　　　　　……

　　　　</table>

　　　　表格中的文字可以添加超链接

　　　　表格中的文字也可以更改颜色，设置字体

　　　　还可以把border属性删掉

　　　　HTML5 中除了 td 标记提供两个单元格合并属性之外，<table> 和 <tr> 标记没有任何属性。

2. 表格属性 —— HTML5 中不再支持它的任何属性

　　　　<table border="1px" cellspacing="0px" cellpadding="5">　　　//cellspacing设置单元格与表框之间的距离，

　　　　　　<tr>　　　　　　　　　　　　　　　　　　　　　　　　　　　　cellpadding设置文本与单元格的距离

　　　　　　　　<td>单元格内容</td>

　　　　　　</tr>

　　　　　　<tr>

　　　　　　……

　　　　</table>

3. 跨行跨列的表格

　　　　跨列的单元格

　　　　　　<tr>

　　　　　　　　<td colspan="2">学生成绩</td>

　　　　　　</tr>

　　　　　　<tr>

　　　　　　　　<td>语文</td>

　　　　　　　　<td>98</td>

　　　　　　</tr>

　　　　跨行的单元格

　　　　　　<tr>

　　　　　　　　<td rowspan="2">学生成绩</td>

　　　　　　　　<td>语文</td>

　　　　　　　　<td>98</td>

　　　　　　</tr>

　　　　　　<tr>

　　　　　　　　<td>数学</td>

　　　　　　　　<td>96</td>

　　　　　　</tr>

4. 创建一个带标题的表格

　　　　有时，为了方便表述表格，还需要在表格的上面加上标题。

　　　　<caption>标题</caption>

5. 编辑表格

　　　1、定义表格的表头

　　　　　　常见的表头分为垂直和水平两种。—— 通过 <th> 标签来实现。

　　　　　　<tr>

　　　　　　　　<th>姓名</th>

　　　　　　　　<th>性别</th>

　　　　　　　　<th>年龄</th>

　　　　　　</tr>

　　　2、设置表格背景（table 的属性）

　　　　　　当创建好表格后，为了美观，还可以设置表格的背景。如为表格定义背景颜色、为表格定义背景图片等。

　　　　　　定义表格背景颜色： bgcolor="green"

　　　　　　定义背景图片： background="images/1.gif"

　　　3、设置单元格背景（td 单元格的属性）

　　　4、合并单元格（td 单元格的属性）

　　　　　　用 colspan 属性合并左右单元格

　　　　　　用 rowspan 属性合并上下单元格

　　　5、设置单元格的行高和列宽

　　　　　　使用 cellpadding 来创建单元格内容与其边框之间的空白，从而调整表格的行高与列宽。

6. 完整的表格标记

　　　　为了让表格结构更清晰，以及配合后面学习的 CSS 样式，更方便地制作各种样式的表格，表格中还会出现表头、主体、脚注等。

　　　　按照表格结构，可以把表格的行分组，行组分为3类——“表头”、“主体” 和 “脚注”。三者对应的 HTML 标签一次为 <thead>、<tbody> 和 <tfoot>

　　　　此外，标记 <caption> 表示表格的标题。（<caption> 标记必须紧随 <table> 标记之后）

转载于:https://www.cnblogs.com/zhangchaoran/p/6798657.html