表格标签

简介

在过去表格标签使用的非常多，绝大多数网站都是通过表格标签来制作的，表格标签是一个时代的代表，<table> 标签用来定义 HTML 表格，一个简单的 HTML 表格应该包括两行两列。

作用

表格标签是用来给一堆数据添加表格语义的，其实表格就是数据的一种展现形式，具有一定的规则。当数据量大的时候，表格这种展现形式被认为是最清晰的一种方式

格式

<table>标签：一对<table>标签就代表一个表格；
<caption>标签：一对<caption>标签就代表着一个表格的标题；
<tr>标签：一对<tr>标签就代表表格中的一行数据；
<td>标签：一对<td>标签就代表表格中的一个单元格；
<th>标签：一对<th>标签就代表表格中的一列列名。

<table>
    <caption>This is the Title</caption>
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>

This is the Title
Month	Savings
January	$100

属性

边框宽度，border
宽度和高度，width&height
- 可以给<table>和<td>标签使用
  - 表格的宽高默认是以单元格内容来填充的，也可以给<table>标签指定height和width来手动设置
  - 给<td>标签手动设置height和width，只会改变单元格的宽高，不会改变整个表格的宽高
水平对齐和竖直对齐
- 水平对齐，align，居左，居中，居右
  - 可以给<table>，<td>，<tr>标签使用；
  - <table>：控制表格在水平方向对齐方式；
  - <td>：控制单元格内容在水平方向对齐方式；
  - <tr>；控制一行单元格内容在水平方向对齐方式；
- 竖直对齐，valign，居上，居中，居下
  - 只能给<tr>和<td>标签使用；
  - <td>：控制单元格内容在竖直方向对齐方式；
  - <tr>；控制一行单元格内容在竖直方向对齐方式；
外边距和内边距
- 只能给<table>标签使用，cellspacing默认为2px，cellpadding默认为1px；
- 外边距，cellspacing，单元格与单元格之间的距离；
- 内边距，cellpadding，单元格边框与单元格内容之间的距离；
细线表格
- 设置表格背景色为黑色；
- 设置单元格背景色为白色；
- 设置表格的cellspacing=”1px”；

<table border="0" cellspacing="1px" bgcolor="black">
    <tr bgcolor="white">
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>

    </tr>
    <tr bgcolor="white">
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
</table>

单元格合并

水平方向的单元格合并
- 设置 colspan = "2"，当前单元格被视为占两格（自左向右）
竖直方向的单元格合并
- 设置 rowspan = "2"，当前单元格被视为占两格（自上而下）

<table bgcolor="black" align="center" width="500px" height="300px" cellspacing="1px">
    <tr bgcolor="white">
        <!--水平单元格合并1.1和1.2-->
        <td colspan="2" bgcolor="black"></td>
        <!--<td></td>-->
        <td></td>
    </tr>
    <tr bgcolor="white">
        <!--2*2单元格合并2.1,2.2,3.1,3.2-->
        <td colspan="2" rowspan="2" bgcolor="lightblue"></td>
        <!--竖直单元格合并2.3,3.3-->
        <td rowspan="2" bgcolor="black"></td>
    </tr>
    <tr bgcolor="white"></tr>
</table>

注意点

<caption>标签一定要写在<table>标签的里面，且一定要紧跟<table>标签；
不要通过加粗和居中首对<tr>标签来实现<th>标签的效果
表格标签有一个border属性，border属性决定了表格的边框宽度，默认为0，所以看不到边框；
如果<td>和<td>标签中同时设置了对齐方式，则以<td>标签中的对齐方式为准；
在表格标签中单纯的设置cellspacing=”0”，来实现细线表格是不行的，这样做会把两条线重叠在一起；
由于表格中的数据比较复杂，为了方便管理和阅读，以及提升语义，可以对表格中的数据进行分类；完整的表格应当具有以下四个部分，如果没有写<tbody>的话浏览器会自动为我们添加；如果指定了<thead>和<tbody>，那么在修改整个表格的高度的时候，<thead>和<tbody>有自己的默认高度，不会随着表格高度的修改而变化
- 表格的标题：<caption>标签
- 表格的表头信息：<thead>标签
- 表格的主题信息：<tbody>标签
- 表格的页尾信息：<tfoot>标签
单元格合并的时候设置colspan是自左向右，rowspan是自上而下，由于一个单元格被看做多个单元格，无论是自左向右还是自上而下，应该删除多余的单元格；
所有的控制样式仍然要通过css，不应该在标签中直接设置

HTML学习笔记——表格标签

表格标签

目录

简介

作用

格式

属性

单元格合并

注意点

猜你喜欢