zoukankan      html  css  js  c++  java
  • 前端(3)表格table


    表格的标签:
    table:一个表格区域
    thead:表头区
    tbody:表内容区
    tfoot:表底区
    thead、tbody、tfoot的分区,用于方便区分,可以不写

    tr:一个表格行
    th:一个表头格
    td:一个表内容格
    通常,tr放在thead、tbody、tfoot里面,th、td放在tr里面。
    例如:

        <table border="1">
            <caption><b>学员信息表</b></caption>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>班级</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>01</td>
                    <td>Jack</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>02</td>
                    <td>Max</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>03</td>
                    <td>Van</td>
                    <td>2</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>04</td>
                    <td>John</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>05</td>
                    <td>Lucy</td>
                    <td>3</td>
                </tr>
            </tfoot>
        </table>

    表格的属性:
    rowspan :跨行合并,该单元格向下合并n行,在下面的行中,会自动跳过该列,注意排版
    colspan :本行合并,该单元格向右合并n列,注意排版

    例如:

        <table border="1">
            <caption><b>学员信息表</b></caption>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>班级</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>01</td>
                    <td rowspan="2">Jack</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>02</td>
                    <!--<td>Max</td>-->
                    <td>1</td>
                </tr>
                <tr>
                    <td colspan="2">03</td>
                    <!--<td>Van</td>-->
                    <td>2</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>04</td>
                    <td rowspan="2" colspan="2">John</td>
                    <!--<td>3</td>-->
                </tr>
                <tr>
                    <td>05</td>
                    <!--<td>Lucy</td>-->
                    <!--<td>3</td>-->
                </tr>
            </tfoot>
        </table>

    表格的样式:
    border-collapse:
    collapse 边框合并,如果相邻的话,共用一个框
    separate 默认值,边框分开,不合并
    例如:

        <style>
            table{
                width: 200px;
                height: 200px;
                border-collapse: collapse;
            }
        </style>
  • 相关阅读:
    源码安装php7.2
    Docker虚拟化之<基础命令>
    Docker虚拟化之<基础理论>
    旧版Linux系统下载地址
    Linux磁盘分区,挂载
    linux crond任务调度
    Linux学习之组管理和权限管理
    mysql 外键的基本使用
    Linux指令(压缩和解压类)
    Linux指令(搜索查找类)
  • 原文地址:https://www.cnblogs.com/ikamu/p/8490909.html
Copyright © 2011-2022 走看看