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

    • <table> 标签
      • 表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 
        • border 属性:规定表格单元拥有边框   
    • <tr> 表格行标签  
      • 用来定义表格的一行。由于HTML表格是面向行的,所以必须分别表示每一行  
      • tr 元素可以在 table,thead,tbody 和 tfoot 元素内使用  
      • tr 元素内可以包含一个或者多个 td 或 th 元素  
    • <td> 表格单元格标签
      • 用来定义表格单元格,可以同 colspan,rowspan,headers 局部属性使用
        • colspan: 左右合并单元格,该属性规定了单元格可横跨的列数,该属性的值必须是整数  
        • rowspan:上下合并单元格,该属性规定了单元格可横跨的行数,该属性的值必须是整数  
        • cellpadding:规定单元格边沿与其内容之间的空白
          • cellpadding="0"  是让单元格边框线与单元格中的内容之间的距离为 0 像素,即单元格中内容紧挨着单元格的边线。
        • cellspacing:规定单元格之间的空白
          • cellspacing="0"  是让各单元格之间的缝隙为 0 象素
        • headers:该属性的值是一个或多个单元的 ID 属性值,将单元格与列标题相关联,可用于使用屏幕阅读器  
        • width:规定表格宽度
        • height:规定表格高度
        • align:规定表格相对周围元素的对齐方式
          • left
          • center
          • right
    • <th> 标题单元格标签
      • 用来定义标题单元格,使我们有效区分数据及其描述  
      • 它同 <td> 元素具有相同的局部属性,两者有如下区别:  
        • <th> 是表示头标记,通常位于首行或者首列。而且 <th> 中的文字默认会被加粗,而 <td> 是不会的    
        • <td> 是数据标记,表示单元格的具体的数据 
    • 快速制表
      • 如下快速生成 3 行 2 列的方法
        <body>
            table>tr*3>td*2      <!-- 输入完后,再按 Tab 键 -->
        </body>
        <body>
            <table border="1">
                <tr>
                    <th>姓名</th>
                    <th>年纪</th>
                    <th>班级</th>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>18</td>
                    <td>一班</td>
                </tr>
            </table>
        </body>
        <body>
            <table border="1" width="200" height="20">
                <tr>
                    <th>姓名</th>
                    <th>年纪</th>
                    <th>班级</th>
                </tr>
                <tr align="center">
                    <td>张三</td>
                    <td>18</td>
                    <td>一班</td>
                </tr>
            </table>
        </body>
        <body>
            <table border="1" width="200" height="20">
                <tr>
                    <th>姓名</th>
                    <th>年纪</th>
                    <th>班级</th>
                </tr>
                <tr>
                    <td>张三</td>
                    <td></td>
                    <td rowspan="2"></td>    <!-- 上下合并 -->
                </tr>
                <tr>
                    <td>李四</td>
                    <td></td>
                    <!-- <td></td> -->
                </tr>
                <tr>
                    <td>王五</td>
                    <td colspan="2"></td>    <!-- 左右合并 -->
                    <!-- <td></td> -->
                </tr>
            </table>
        </body>
  • 相关阅读:
    关于eclipse 的 web.xml文件 There is '1' error in 'j2ee_1_4.xsd'. 错误
    C#实现Java的AES加密解密算法
    jsp页面报错javax.servlet.jsp.jspException cannot be resolved to a type
    Ubuntu下查看jdk安装路径
    【Mysql】启动mysql报错mysqld_safe error: log-error set to /var/log/mariadb/mariadb.log
    spring mvc导出csv案例
    MyBatis 调用存储过程(详解)
    mysql 无限递归出现 data too long for column 'xxx' 错误
    java的maven项目头上有红叉解决方法
    Nexus3搭建Docker等私服
  • 原文地址:https://www.cnblogs.com/ZhengYing0813/p/12539562.html
Copyright © 2011-2022 走看看