表格元素

table元素的基础元素组成

HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息

  • 一个可选的 <caption> 元素

  • 一个可选的 <thead> 元素

  • 下列任意一个:

    零个或多个 <tbody>

    零个或多个 <tr>

    零个或多个 <th>

    零个或多个 <td>

    一个可选的 <tfoot> 元素

table的基础使用

  • table是表格的最外层
  • caption：HTML <caption> 元素 (or HTML 表格标题元素) 展示一个表格的标题， 它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面
  • tr就是表格的每一行
  • th表示表头单元格 默认居中和加粗
  • td表示普通单元格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
    <table>
        <caption>1108班就业表</caption>
        <tr>
            <th>姓名</th>
            <th>就业薪资</th>
            <th>备注</th>
        </tr>
        <tr>
            <td>小王</td>
            <td>12</td>
            <td></td>
        </tr>
        <tr>
            <td>老王</td>
            <td>13</td>
            <td></td>
        </tr>
        <tr>
            <td>王中王</td>
            <td>14</td>
            <td></td>
        </tr>
        <tr>
            <td>大王</td>
            <td>15</td>
            <td></td>
        </tr>
    </table>
</body>
</html>Copy to clipboardErrorCopied

 

table的常用属性

  • border：（废弃）

    这个整型元素使用像素，定义了表格边框的大小

    如果设置为1，表示表格具有1px大小的边框。

  • cellpadding ：（废弃）

    这个属性定义了表格单元的内容和边框之间的空间。如果它是一个像素长度单位，这个像素将被应用到所有的四个侧边

  • cellspacing ：（废弃）

    这个属性（使用百分比或像素）定义了两个单元格之间空间的大小（从水平和垂直方向上）

  • width ：（废弃）

    该属性定义了表格的宽度。宽度可能是一个像素或者是一个百分比值，宽度的百分比值将被定义为表格容器的宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
    <table width="400" border="1" style="" cellpadding="10" cellspacing="10">
        <caption>0225班就业表</caption>
        <tr>
            <th>姓名</th>
            <th>就业薪资</th>
            <th>备注</th>
        </tr>
        <tr>
            <td>小王</td>
            <td>12</td>
            <td></td>
        </tr>
        <tr>
            <td>老王</td>
            <td>13</td>
            <td></td>
        </tr>
        <tr>
            <td>王中王</td>
            <td>14</td>
            <td></td>
        </tr>
        <tr>
            <td>大王</td>
            <td>15</td>
            <td></td>
        </tr>
    </table>
</body>
</html>Copy to clipboardErrorCopied

 

合并单元格

合并单元格：

  • colspan:设置跨列，谁合并，给谁设置
  • rowspan：设置跨行,谁合并，给谁设置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
    <table width="400" border="1" style="border-collapse:collapse;" cellpadding="10" cellspacing="0">
        <caption>0225班就业表</caption>
        <tr>
            <th colspan="2">学生就业就业薪资</th>
            <th>备注</th>
        </tr>
        <tr>
            <td>小王</td>
            <td>12</td>
            <td></td>
        </tr>
        <tr>
            <td>老王</td>
            <td rowspan="2">13</td>
            <td></td>
        </tr>
        <tr>
            <td>王中王</td>
            <td></td>
        </tr>
        <tr>
            <td>大王</td>
            <td>15</td>
            <td></td>
        </tr>
    </table>
</body>
</html>Copy to clipboardErrorCopied

 

表格的优化

  • thead　表格的头 用来放标题之类的东西

  • tbody　表格的身体 放数据本体

  • tfoot　 表格的脚 放表格的脚注之类

为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时， table是作为一个整体解释的，使用tbody可以优化显示。如果表格很长，用tbody分段， 可以一部分一部分地显示，不用等整个表格都下载完成

tbody包含行的内容下载完优先显示，不必等待表格结束.另外，还需要注意一个地方。表格行本来是从上向下显示的。但是，应用了thead/tbody/tfoot以后，就“从头到脚”显示，不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面，html显示时，还是以先thead后tbody显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的优化</title>
</head>
<body>
    <!--
        表格的优化
            thead
            tbody
            tfoot
    -->
    <table>
        <thead>
            <tr>
                <td>
                    1
                </td>
            </tr>
            <tr></tr>
            <tr></tr>
        </thead>
        <tbody>
            <tr>
                <td>2</td>
            </tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
        </tbody>
        <tbody>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
        </tbody>

        <tfoot>
            <tr></tr>
            <tr></tr>
            <tr></tr>
        </tfoot>

    </table>
</body>
</html>

 

posted @ 2023-01-09 22:51  z_bky  阅读(119)  评论(0)    收藏  举报