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"。

  • 相关阅读:
    javascript功能插件大集合
    基于Swiper插件的简单轮播图的实现
    LeetCode24. 两两交换链表中的节点
    530. 二叉搜索树的最小绝对差
    416. 分割等和子集
    GAN ——Generative Adversarial Network 理解与推导(一)
    面试题 02.08. 环路检测(返回环路开头节点)
    141.环形链表-LeetCode
    357. 计算各个位数不同的数字个数 ——LeetCode
    LSTM的理解
  • 原文地址:https://www.cnblogs.com/Ewarm/p/13444582.html
Copyright © 2011-2022 走看看