zoukankan      html  css  js  c++  java
  • 【htlm5】table标签结构学习

    一、HTML table标签结构

    html 中table标签的结构情况,如下所示:

    复制代码
    <!-- table标签结构如下:
        <table>
            <thead>              # thead表格头部分,
                <tr>            #tr 是table中的列,
                    <th>标题</th>     #th 是table中的标题部分的行
                    <th>标题</th>
                    <th>标题</th>
                </tr>
            </thead>
    
            <tbody>             #tbody 表格主题部分
                <tr>            #tr 是table中的列
                    <td>内容</td>    #td 是table中主题部分的行
                    <td>内容</td>
                    <td>内容</td>
                </tr>
            </tbody>
        </table>    
    -->
    复制代码

    二、HTML中表格元素TABLE,TR,TD及属性的语法

    (1)table:表格元素及属性

    属性说明
    width 表格宽度,单位为%或象素
    border 表格边框线的粗细
    cellspacing 表格间距
    cellpadding 表格边距
    bgcolor 表格背景颜色
    bordercolor 表格边框线的颜色
    align 表格的对齐方式:
      居中center 左对齐left  右对齐right

    (2)属性说明举例:

      以下代码可以直接复制粘贴运行,通过运行结果我们可以更感谢的认识下table这个结构标签。

    复制代码
    <table width="80%" border="1" cellspacing="1" cellpadding="4" bgcolor="#CC99FF" bordercolor="#0000FF" align="center">
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    复制代码

    其他:

      tr:行元素

      td:列元素

      tr,td元素的属性基本相同,但增加行合并属性colspan="2" 和 列合并属性rowspan="2"。

  • 相关阅读:
    Nginx实现动静分离
    Nginx实现负载均衡
    Linux安装Kafka
    Linux安装RocketMQ
    转://ORA-00603,ORA-27501,ORA-27300,ORA-27301,ORA-27302故障案例一则
    CPU, PSU, SPU
    转://Oracle打补丁方法论
    转://Oracle数据库补丁分析实践
    转://Linux Multipath多路径配置与使用案例
    转://Oracle中定义者权限和调用者权限案例分析
  • 原文地址:https://www.cnblogs.com/Ewarm/p/13444582.html
Copyright © 2011-2022 走看看