HTML5 学习笔记表格标签

terry 2年前 (2023-09-27) 阅读数 88 #数据结构与算法

1。功能：

以表格的形式显示数据。当数据量很大时，表格显示形式被认为是最透明的显示形式

2.格式：

table 定义表格
tr 定义行
td 定义单元格

3. 表中的属性

border：默认情况下，表格边框的宽度为0并且不可见。您可以使用 border 属性指定表格边框的宽度。
width：默认情况下，表格的宽度根据内容自动计算。您可以使用 width 属性指定表格的宽度。
高度：默认情况下，表格高度根据内容自动计算。您可以使用高度属性
cellspacing：边距来确定表格的高度。默认情况下，单元格之间的间隙为 2 个像素，您可以使用 cellpadding
cellpadding: padding 指定表格之间的间隙。默认情况下，单元格边框距内容有 1 个像素的内边距。使用 cellpadding 属性，您可以指定单元格边框和内容之间的填充。
align：指定表格相对于周围元素的对齐方式。它的值包括center、left、right
- 设置表格的对齐属性，使表格在浏览器中左/右/居中
- 设置tr的对齐属性是为了将整个内容对齐当前行左/右/中
- 设置td的对齐属性，是将当前单元格中的所有内容左/右/中对齐
- 该属性仅供理解。企业开发中改用CSS，因为HTML只是为了说明语义
- 如果td中设置了align属性，tr中也设置了align属性，则单元格中的内容会按照td中的设置进行对齐
valign：指定表格相对于周围元素的对齐方式。其值包括center、left、right
- 为table设置valign属性，void
  为tr设置valign属性，使当前行所有内容top/center/bottom
- 为td设置valign属性，使当前单元格中的所有内容位于top/center/bottom
- 如果td中设置了valign属性，并且tr中也设置了valign属性，那么单元格中的内容将按照td中的设置进行对齐
bgcolor：指定表格背景颜色
- 设置表格的 bgcolor 属性，就是设置整个表格的背景颜色
- 设置 tr 的 bgcolor 属性，就是为当前行设置背景颜色
- 设置bgcolor 属性，用于td设置当前单元格的背景颜色
- 该属性仅供理解，在企业开发中被css替代，因为HTML仅用于说明语义

1) 示例代码

<!--表格标签-->
<!--先定义一个表格, 然后通过tr告诉浏览器这个表格中一共有多少行, 然后再通过td告诉浏览器这一行中一共有多少个元素(一共有多少列)-->
<table border="1" width="500" cellpadding="5" cellspacing="10">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

2)显示样式

Snip20170614_17.png

4。表格中的其他标签表格中的单元格有两种类型，一种是标准td单元格，另一种是标题单元格第

第

第标签：为每列设置名称，单元格内容会自动加粗并显示centered

title 标签：设置整个表格的名称

必须嵌套在 talbe 标签中才能生效

1) 示例代码

<table bgcolor="#5f9ea0" cellspacing="1px" width="1000" align="center">
    <caption>
        <h2>这周代码量排行榜</h2>
    </caption>
    <tr bgcolor="#8a2be2">
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近一天</th>
        <th>最近一天相关链接</th>
    </tr>
    <tr bgcolor="#f0ffff" align="center">
        <td>1</td>
        <td>穷爸爸富爸爸</td>
        <td>上涨</td>
        <td>456</td>
        <td>234214</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">百度</a>
            <a href="#">杭州</a>
        </td>
    </tr>
    <tr bgcolor="#f0ffff" align="center">
        <td>2</td>
        <td>穷爸爸富爸爸</td>
        <td>上涨</td>
        <td>234</td>
        <td>3423542</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">百度</a>
            <a href="#">杭州</a>
        </td>
    </tr>

2) 显示样式？一般用于存储页面的主要数据。如果不写，会自动添加标签

tfoot：用于存储表尾（脚注或表注）。如果不添加css，则默认设置表头的高度。缩小后一般不显示

1）示例代码

<table bgcolor="#7fffd4" width="800" cellspacing="2" align="center">
    <caption>我是表格标题</caption>
    <thead>
    <tr align="center">
        <th>每一列的标题</th>
        <th>每一列的标题</th>
        <th>每一列的标题</th>
        <th>每一列的标题</th>
        <th>每一列的标题</th>
    </tr>
    </thead>
    <tbody>
    <tr align="center">
        <td>数据</td>
        <td>数据</td>
        <td>数据</td>
        <td>数据</td>
        <td>数据</td>
    </tr>
    </tbody>
    <tfoot>
    <tr align="center">
        <td>数据</td>
        <td>数据</td>
        <td>数据</td>
        <td>数据</td>
        <td>数据</td>
    </tr>
    </tfoot>
</table>