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

时间：2024-07-07 17:59:19

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

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

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：用于指定单元格向下跨越多少行。

结束 --- 

相关文章