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>
  • 相关阅读:
    类与类之间的几种关系
    spring之BeanFactory
    java打开本地应用程序
    java笔记六:线程间的协调
    继承与组合的优缺点
    适配器模式之对象适配器
    java笔记三:List接口
    java笔记二:final关键字用法总结
    设计模式之命令模式
    利用栈实现迷宫的求解
  • 原文地址:https://www.cnblogs.com/gzu_zb/p/9443126.html
Copyright © 2011-2022 走看看