HTNL——表格

最新推荐文章于 2024-10-14 18:12:09 发布

小小橙煦缘

最新推荐文章于 2024-10-14 18:12:09 发布

阅读量304

点赞数 4

文章标签：前端 html5

本文链接：https://blog.csdn.net/2301_77737374/article/details/140146968

版权

目录

什么是表格

表格应用场景

表格结构

基本用法

表格属性

表格进阶

例子：
什么是表格
- 表格是由行和列组成的结构化数据集(表格数据)，它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值。比如说，某个人和他的年龄，一天或是一周，当地游泳池的时间表
表格应用场景
- 处理、显示表格式数据
- 不是用来布局
表格结构
- 行
- 单元格
- 先写列！一个表格包含表格名，列名，主体名，脚注！

基本用法

<table>
    <caption>标题(可选)</caption>  表格名
    <thead>        列名
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>        主体
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr></tr>
        ...
    </tbody>
    <!-- 可选 -->
    <tfoot>    脚注
        <tr>
            <td></td>
        </tr>
    </tfoot>
    
</table>

表格属性
- border : 边框，取值为0或1 ， 0无框，1有框
- width: 宽度，单位可以是px(像素)和%
  - 注：百分比相对父元素(标签)
  - 每列的宽度会根据内容自动分配
- height：每行平均分配高度
- cellpadding: 单元素内填充，单元格的边框与内容的距离
- cellspacing：单元格间距, 单元格之间的距离
- align：水平对齐方式: 值为left|center|right
表格进阶
- 标签可嵌套a实现超链接
  - caption : 表格标题(可选) 可嵌套h2等实现加粗
  - thead: 标题行
  - tbody: 内容
  - tfoot: 脚（可选）
- 单元格(td)属性
  - colspan: 单元格跨列只在第一行写明即可
  - rowspan ：单元格跨行

表格是用来展示数据的方法，不是用来实现网页布局的方式

表格是用来约定数据展示的结构，至于外观(显示效果)，那是CSS要做的

表格是由数据行(tr)中的单元格(td)组成

例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      table: 表格标签 
      常用属性: border:0或1 1代表显示边框 0隐藏边框
               cellspacing: 单元格间距
               cellpadding: 单元格填充 : 单元格与内容之间距离
    -->
    <table border="1" style="width: 800px">
      <!-- 标题 -->
      <caption>
        成绩表
      </caption>
      <!-- 标题行，列头 -->
      <thead>
        <!-- 行 table row -->
        <tr>
          <!-- 标题行中的单元格, th只能出现在thead中 ,默认样式：加粗居中 -->
          <th>学号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>备注</th>
        </tr>
      </thead>
      <!-- 主体 -->
      <tbody>
        <tr>
          <!-- tbody或tfoot中的单元格 
              常用属性:
                  colspan:跨列  column
          -->
          <td>1</td>
          <td>Rose</td>
          <td>男</td>
          <td>18</td>
          <td rowspan="2">学生备注</td>
        </tr>
        <tr>
          <!-- tbody或tfoot中的单元格 
              常用属性:
                  colspan:跨列  column
                  rowspan:跨行
          -->
          <td>2</td>
          <td>Jack</td>
          <td>男</td>
          <td>18</td>
        </tr>
      </tbody>
      <!-- 脚注: 可以有也可以没有 -->
      <tfoot>
        <tr>
          <td colspan="3">小计</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>