HTML CSS 基础复习笔记 - 表格标签使用

发布于:2024-07-04 ⋅ 阅读:(68) ⋅ 点赞:(0)

目的:部分标签并不使用,但是其存在,创建案例,方便自己复习

关于表格的所有标签使用、说明

HTML代码:

        <!-- 表格学习 -->
        <table border="1px">
          <caption>表格学习</caption>
          <colgroup>
            <col style="width: auto; background-color: #b89898;">
            <col style="width: auto; background-color: #ea8ec2;">
          </colgroup>
          <thead>
            <tr>
              <th>姓名</th>
              <th>数学</th>
              <th>语文</th>
              <th>总分</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>张三</td>
              <td>80</td>
              <td>99</td>
              <td>179</td>
            </tr>
            <tr>
              <td>李四</td>
              <td>77</td>
              <td>100</td>
              <td>177</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3">平均分</td>
              <td>178</td>
            </tr>
          </tfoot>
        </table>

效果:

标签说明:

        1、<table> 元素表示表格数据

        2、<caption>:表格标题元素

        3、<colgroup>:表格列组元素 -- 定义表格某列的样式

        4、<col>:表格列元素 -- 定义表格某列的样式

        5、<thead> -- 定义了一组定义表格的列头的行,子元素为tr、th

        6、<tr> -- 定义了表格中的一行单元格,子元素为td

        7、<th> -- 定义表格内的标题(或是表头)单元格

        8、<tbody> -- 表格(<table>)主要内容的组成部分,子元素为tr、td

        9、<td> -- 定义了表格中的一个数据单元格,该单元格包含数据

        10、<tfoot> -- 定义了一组表格中各列的汇总行,子元素为tr、td

标签属性:

  1. table属性

    • border:该属性用于设置围绕表格及其单元格的边框宽度。
    • width:用于设定表格的宽度,可以以像素或百分比为单位。
    • height:此属性用于设定表格的高度,但需要注意的是,在XHTML中,<table>标签没有这个属性。
    • background:用于定义表格的背景图像URL。
    • align:规定表格相对于周围元素的对齐方式,其值可以是左(left)、居中(center)或右(right)对齐。
    • bgcolor:设置表格的背景颜色,可以使用颜色名称、十六进制代码或RGB值。
    • bordercolor:专门用于指定表格边框的颜色。
    • cellspacing:定义单元格之间的空间大小,通常以像素为单位。
    • rules:该属性决定了内部单元格边框的显示,取值为none、cols、rows或all。
    • frame:类似于rules属性,但仅应用于表格的外边框。
    • cellpadding:用于设置单元格的边框与内容之间的空间大小。
  2. 行(tr)的属性

    • bgcolor:用于设置内容行的背景颜色。
    • border:定义内容行的边框宽度。
    • background:为内容行设置一个背景图像。
    • align:用于指定整行内容的水平对齐方式,可能的值有左(left)、居中(center)和右(right)。
    • valign:定义整行内容的垂直对齐方式,包括上(top)、中(middle)和下(bottom)。
    • bordercolor:设置内容行边框的颜色。
  3. 单元格(td和th)的属性

    • width:用于指定单元格的宽度。
    • height:用于设定单元格的高度,但在XHTML中不适用。
    • bgcolor:用于定义单元格的背景颜色。
    • border:定义单元格边框的宽度。
    • background:用于定义单元格的背景图像。
    • align:设置单元格内容的水平对齐方式,可取值为左(left)、居中(center)和右(right)。
    • valign:设置单元格内容的垂直对齐方式,包括上(top)、中(middle)和下(bottom)。
    • colspan:指定单元格向右跨越多少列。
    • rowspan:用于指定单元格向下跨越多少行。

结束 ---