• html 之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"。

  • 相关阅读:
    【leetcode】38. Count and Say
    【leetcode】132. Palindrome Partitioning II
    New Concept English three (56)
    New Concept English three (55)
    New Concept English three (54)
    listening 1
    New Concept English three (53)
    BEC translation exercise 4
    New Concept English three (52)
    MBA 工商管理课程-风险型决策方法
  • 原文地址:https://www.cnblogs.com/my1e3/p/6564197.html
Copyright © 2020-2023  润新知