[HTML5]-4-表格
引言
这篇文章介绍HTML中的表格。
文章目录
0×1.table标签实例
1）简单的表格结构
要想在页面中显示一个表格，可以使用table标签，在table标签对中，使用tr标签定义表格的一行，使用th标签包含表格的表头信息，使用td标签包含表格每个单元格的信息，请看下面的实例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>table标签实例</title> </head> <body> <!--border属性定义了表格的边框厚度，大家可以尝试着将1改成10，查看一下显示效果--> <table border="1"> <tr> <!--每个tr标签对都代表表格的一行--> <!--包含在th里的表头字体会被加粗显示--> <th>表头1</th> <th>表头2</th> </tr> <tr> <!--每个th或td标签对都代表表格的一个单元格--> <td>数据1</td> <td>数据2</td> </tr> </table> </body> </html>
显示效果：
| 表头1 | 表头2 |
|---|---|
| 数据1 | 数据2 |
2）横向合并与竖直合并的单元格
表格的单元格是可以横向合并和竖直合并的，使用colspan横向合并单元格，使用rowspan竖直合并单元格，请看下面的实例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>table标签实例</title> </head> <body> <table border="1"> <!--横向占三个单元格的th标签--> <tr> <th colspan="3">大表头</th> </tr> <tr> <!--竖直占用2个单元格的td标签--> <td rowspan="2">向下合并2</td> <td>数据1</td> <td>数据2</td> </tr> <tr> <td>数据3</td> <td>数据4</td> </tr> </table> </body> </html> <!--注意！如果设置了表头横向占用3个单元格，那么对应的，下面每排tr中也应该有3个td，因为第二排的第一个td向下多占用了一个单元格，所以第三排tr中，就只需要2个td了，大家可以尝试着少写一个td，那样浏览器会在对应的单元格部分留出空白-->
显示效果：
| 大表头 | ||
|---|---|---|
| 向下合并2 | 数据1 | 数据2 |
| 数据3 | 数据4 | |
3）表格结构框架thead，tbody，tfoot
在table标签中使用thead，tbody，tfoot这三个标签，强调表格的头部，主干和表尾，这样不论这些语句是不是按照顺序书写，解释器都能识别它们正确的位置，请看下面的实例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>table标签实例</title> </head> <body> <table border="1"> <!--表格的描述信息，包含在caption标签中--> <caption>表格描述信息</caption> <tfoot><!--tfoot标签虽然写在头部上面，但仍然显示在表格底部--> <tr> <td colspan="2">表格尾部信息</td> </tr> </tfoot> <tbody> <tr> <td>内容1</td> <td>内容2</td> </tr> </tbody> <thead><!--thead标签虽然写在最下方，但仍然显示在表格顶部--> <tr> <th colspan="2">表格头部信息</th> </tr> </thead> </table> </body> </html>
显示效果：
| 表格尾部信息 | |
| 内容1 | 内容2 |
| 表格头部信息 | |
|---|---|
0×2.表格列选择器colgroup
表格列选择标签colgroup，可以帮助我们灵活的选择表格的某列进行css样式控制，请看下面的实例：
1）选择表格的第一列
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>table标签实例</title> </head> <body> <table border="1"> <!--默认不添加属性span，就是选择表格第一列，其中的style样式是css的内容，这里我们可以理解成将表格的第一列的背景设置成绿色--> <colgroup style="background: green;"></colgroup> <tr> <td>数据1</td> <td>数据2</td> <td>数据3</td> </tr> <tr> <td>数据4</td> <td>数据5</td> <td>数据6</td> </tr> </table> </body> </html>
显示效果：
| 数据1 | 数据2 | 数据3 |
| 数据4 | 数据5 | 数据6 |
2）使用span选择两列
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>table标签实例</title> </head> <body> <table border="1"> <!--span属性告诉解释器，从表格的第一列开始选择几列，本例选择2列，设置其背景为绿色--> <colgroup style="background: green;" span="2"></colgroup> <tr> <td>数据1</td> <td>数据2</td> <td>数据3</td> </tr> <tr> <td>数据4</td> <td>数据5</td> <td>数据6</td> </tr> </table> </body> </html>
显示效果：
| 数据1 | 数据2 | 数据3 |
| 数据4 | 数据5 | 数据6 |
3）仅选择其中的某一列
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>table标签实例</title> </head> <body> <table border="1"> <colgroup> <!--在colgroup标签中配置col子标签，每对col子标签代表表格的一列，如果仅想配置表格的第二列，用一对空col标签占用第一列即可，如果是想配置表格的第三列，那么可以再添加一个col空标签对占用第二列，以此类推，本例配置的是第二列背景为绿色--> <col></col> <col style="background: green;"></col> </colgroup> <tr> <td>数据1</td> <td>数据2</td> <td>数据3</td> </tr> <tr> <td>数据4</td> <td>数据5</td> <td>数据6</td> </tr> </table> </body> </html>
显示效果：
| 数据1 | 数据2 | 数据3 |
| 数据4 | 数据5 | 数据6 |
如果是想配置表格的第3和第4列，可以在col标签中使用span属性，span属性的作用和colgroup中相同，即从第几列开始，往后选择几列：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>table标签实例</title> </head> <body> <table border="1"> <colgroup> <col></col> <!--从第2列开始，往后选择2列，即选择第2列和第3列，并将其背景显示为绿色--> <col style="background: green;" span="2"></col> </colgroup> <tr> <td>数据1</td> <td>数据2</td> <td>数据3</td> </tr> <tr> <td>数据4</td> <td>数据5</td> <td>数据6</td> </tr> </table> </body> </html>
| 数据1 | 数据2 | 数据3 |
| 数据4 | 数据5 | 数据6 |
根据上一篇文章的内容我们可以分析得出，table应该属于块状元素，因为它每次出现都是独占一行，但这并不意味着所有独占一行的元素都是块状元素，因为块状元素和后面要介绍的内联元素是可以通过css互相转换的，我们所说的独占一行，是指默认在没有css控制的情况下，如果这个元素的出现独占一行，那么可以判断，这个元素就是块状元素。