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>
  • 相关阅读:
    ubuntu18.04 切换python版本
    chart
    tox -e py27报错
    ubuntu 18.04配置静态ip,解决无法上网问题,解决resolv.conf配置文件被覆盖
    ubuntu 18.04输入法问题
    openstack 王者归来学习笔记
    nova client和nova restfull api区别
    nova-api nova-compute 启动服务的时候有的没有加配置文件有的加了
    go语言基本语法
    【转】 Docker和CI/CD实战
  • 原文地址:https://www.cnblogs.com/ikamu/p/8490909.html
Copyright © 2011-2022 走看看