HTML-表格标签

最新推荐文章于 2023-06-08 09:18:28 发布

sundaxiao

最新推荐文章于 2023-06-08 09:18:28 发布

阅读量583

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/sunxiaofre/article/details/55654095

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

表格标签的基本使用

概念：表格标签是用来给一堆数据添加表格语义。其实表格是一种数据的展现形式，数据量很大时，表格是一种最为清晰的展现形式。之前常用，现在已被div标签取代。
格式：<table><tr><td></td></tr></table>。其中，table代表一个表格；tr代表整个表格中的一行数据；td 代表表格中某一行中的某一个单元。
注意：表格标签有个边框属性border，这个属性决定了边框的宽度，在默认情况下这个属性的值为0，所以看不到边框，若想显示边框需自己设置该属性。
代码示例：

<table border="1">
    <tr>
        <td>
            此处添加表格单元格中的内容
        </td>
    </tr>
</table>

tr与td组合出现，是好基友。

表格标签的属性

宽度和高度的属性：可以给table标签和td标签使用。
—>表格的宽度和高度默认是按照内容的尺寸来调整的，可以通过给table标签设置width属性和height属性来设置表格的宽度和高度。
—>如果给td标签设置width和height属性，会影响当前单元格的宽度和高度，不会影响整个表格总共的宽度和高度，但是会影响与之相邻的行或列的宽或高。
水平对齐和垂直对齐的属性：水平对齐可以给table标签和tr标签和td标签使用；垂直对齐可以给tr标签和td标签使用。
—>align属性：left，center，right；
—>valign属性：top，center，bottom；
—>给table设置align属性可以控制表格在水平方向对齐方式；
—>给tr设置align属性可以控制表格当前行中的单元的水平方向对齐方式；
—>给td设置align属性可以控制当前单元格中的内容的水平方向对齐方式。老大；
—>给tr设置valign属性可以控制当前行的垂直方向对齐方式；
—>给td设置valign属性可以控制当前单元格中的内容的垂直方向对齐方式。老大；
外边距和内边距的属性：只能给table标签使用。
—>外边距：单元格与单元格之间的距离。cellspacing默认值是2；
—>内边距：单元格的边框和格内文字的距离。cellpadding默认值是1；
示例代码：

<table border="1" width="500px" height="300px">
    <tr valign="top或center或bottom">
        <td width="100px" height="50px"></td>
        <td></td>
    </tr>
    <tr align="left或center或right">
        <td></td>
        <td></td>
    </tr>
</table>

细线表格

吐槽：在表格标签中想通过制定外边距为0的方式来实现细线表格太扯，其实它是将2条线合并为一条线，所以看上去不舒服。
细线表格真正的设置方式是通过bgcolor背景颜色+cellspacing外边距来设置的。步骤：给table标签设置bgcolor="black"；给tr标签设置bgcolor="white"属性；给table标签设置cellspacing="1px"属性。
如下代码示例：

<table bgcolor="black" cellspacing="1px">
    <tr bgcolor="white">
        <td>1.1</td>
        <td>1.2</td>
    </tr>
        <tr bgcolor="white">
        <td>2.1</td>
        <td>2.2</td>
    </tr>
</table>

表格中的其他标签

表格标题：在表格标签中提供了一个标签专门用来设置表格的标题，即<caption></caption>，需要将caption标签放在table之下。
—>

<table bgcolor="black" cellspacing="1px" width="800px">
    <caption>
        <h2>今日小说排行榜</h2>
    </caption>
    <tr bgcolor="#a9a9a9">
        <td>排名</td>
        <td>关键字</td>
        <td>趋势</td>
        <td>今日搜索</td>
        <td>最近七日</td>
        <td>相关链接</td>
    </tr>
</table>

标题单元格标签：在表格标签中提供了一个标签专门用来存储每一列的标题，即th标签，只要将当前列的标题存储在这个标签中，文字便会自动居中并且加粗。
—>

<table bgcolor="black" cellspacing="1px" width="800px">
    <caption>
        <h2>今日小说排行榜</h2>
    </caption>
    <tr bgcolor="#a9a9a9">
        <th>排名</th>
        <th>关键字</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
    </tr>
</table>

总之，表格中有两种单元格，一种是td（存储数据），一种是th（存储当前列的标题）。
（了解）表格格式的代码示例：
—>

<table>
    <caption>
        指定表格的标题
    </caption>
    <thead>
        <tr>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table>

--->caption：指定表格的标题；
--->thead：指定表格的表头信息；
--->tbody：指定表格的主体信息；
--->tfoot：指定表格的附加信息；

表格合并

水平方向上的单元格合并：
—>可以给td标签添加一个colspan属性，来指定在水平方向把某一个单元格当作多个单元格。
—>例如：<td colspan="2"></td>：将当前单元格看作两个单元格，相当于两个单元格的大小。
—>注意：由于把某一个单元格当作了多个单元格来看，所以就多出来一些单元格，所以需要删掉一些单元格才能正常显示。
垂直方向上的单元格合并
—>可以给td标签添加一个rowspan属性，来指定在垂直方向把某一个单元格当作多个单元格。
—>例如：<td rowspan="2">

以上所有内容了解一下就行，以后在企业开发中所有控制样式都是通过css！