zoukankan      html  css  js  c++  java
  • 表格标签

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
    <!--
        需求1:显示一个三行四列的标签
        <table>:定义一个表格
            <tr>:行
            <td>:列
            <th>:表头(加粗效果)
            <thead>:把表头包裹
            <tbody>:把表头包裹
            <tfoot>:脚的部分
            
            <border>:决定表格的边框
            cellspacing:是单元格之间的间距
            
                
        需求2:给当前表格添加一个标题
            <caption>:表格的标题,自动居中
        需求3:合并张三和李四的性别 合并行
            <rowspan>:取值:合并N行,就取N,同时依次删除N-1个单元格
        需求3:合并张三的姓名和年龄 合并列
            <colspan>:取值:合并N行,就取N,同时删除tr下N-1个单元格
        
    -->        
        <table border="1" cellspacing="0" " width="400px";">
            <caption>学生信息表</caption>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>电话</th>
            </tr>
            <tr>
                <td colspan="2">张三 18</td>
                <td rowspan="2">男</td>
                <td>133</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>22</td>
                <td>155</td>
            </tr>
        </table>    
        <br />
        <br />
        <br />
        <br />
        
        <h1>两行两列合并成一个单元格</h1>
        <table width="400px" border="1" cellspacing="0">
            <tr>
                <td>5</td>
                <td>5</td>
                <td>5</td>
            </tr>
            <tr>
                <td colspan="2" rowspan="2">1</td>
                <!--<td>2</td>-->
                <td>3</td>
            </tr>
            <tr>
                <!--<td colspan="2">4</td>-->
                <!--<td>5</td>-->
                <td>6</td>
            </tr>
            
        </table>
        </body>
    </html>
  • 相关阅读:
    【Java】Java网络编程
    (4.47)sql server 中的 values 构造临时表
    阿里时序数据库 telegraf+influxdb+grafana for sqlserver input plugin
    全景互动制作工具
    湖南师范大学的案例
    git观点
    js-cookie对cookie的操作
    hsf的意义在于什么
    Prettier看这一篇就行了
    关于微前端的观点
  • 原文地址:https://www.cnblogs.com/gzu_zb/p/9443126.html
Copyright © 2011-2022 走看看