写在前面

在网页中插入表格可以使网页上的内容排列整齐，让浏览者对表格中表达的数据及其含义一目了然。本节将重点讲解 HTML 表格的相关内容，表格在网页中主要有 2 种用途：1 是存放数据，2是组织网页内容

知识点

  • HTML 表格概述
  • 表格基础
  • 高级表格特性和可访问性

表格属性

属性名                含义
cellspacing        设置单元格与单元格之间的距离
cellpadding        设置文字与单元格之间的距离
width              设置表格的宽度
height             设置表格的高度
bgcolor            设置背景颜色
colspan            合并行 又称跨列
rowspan            合并列 又称跨行
caption            表格标题

复杂表格的结构

在使用表格进行布局时，可以将表格划分为头部、主体和页脚，具体如下所示：

  • <thead></thead>：用于定义表格的头部，一般包含网页的logo和导航等头部信息,位于<table></table>之中。
  • <tfoot></tfoot>：用于定义表格的页脚，一般包含网页底部的企业信息，地址联系方式等，位于<table></table>标记之中，<thead></thead>标记之后。
  • <tbody></tbody>：用于定义表格的主体，一般包含网页中除头部和底部之外的其他内容，位于<table></table>标记之中，<tfoot></tfoot>标记之后。

注：现在很多布局都是采用 div+css 的方式，table 布局可以直接搜索”搜狐股票“。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table width="300" height="200" bgcolor="green"
        cellspacing="1" align="center">
    <caption>课程表</caption>
        <tr bgcolor="white">
            <th width="80" colspan="2"></th>
            <!-- <td></td> -->
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr bgcolor="white">
            <td rowspan="2" width="50">上午</td>
            <td width="30">1</td>
            <td>语文</td>
            <td>数学</td>
            <td>外语</td>
            <td>音乐</td>
            <td>体育</td>
        </tr>
        <tr bgcolor="white">
            <!-- <td></td> -->
            <td>2</td>
            <td>数学</td>
            <td>数学</td>
            <td>物理</td>
            <td>化学</td>
            <td>生物</td>
        </tr>
        <tr bgcolor="white" align="center">
            <td colspan="7" height="50">午休时间12点到2点</td>
               <!-- <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                -->
        </tr>
        <tr bgcolor="white">
            <td rowspan="4" height="50">下午</td>
            <td>1</td>
            <td>体育</td>
            <td>语文</td>
            <td>历史</td>
            <td>政治</td>
            <td>化学</td>
        </tr>
        <tr bgcolor="white">
            <!-- <td></td> -->
            <td>2</td>
            <td>音乐</td>
            <td>语文</td>
            <td>数学</td>
            <td>美术</td>
            <td>语文</td>
        </tr>
        <tr bgcolor="white">
            <!-- <td></td> -->
            <td>3</td>
            <td>音乐</td>
            <td>语文</td>
            <td>数学</td>
            <td>美术</td>
            <td>语文</td>
        </tr>
        <tr bgcolor="white">
            <!-- <td></td> -->
            <td>4</td>
            <td>音乐</td>
            <td>语文</td>
            <td>数学</td>
            <td>美术</td>
            <td>语文</td>
        </tr>
    </table>
</body>
</html>
课程表
星期一 星期二 星期三 星期四 星期五
上午 1 语文 数学 外语 音乐 体育
2 数学 数学 物理 化学 生物
午休时间12点到2点
下午 1 体育 语文 历史 政治 化学
2 音乐 语文 数学 美术 语文
3 音乐 语文 数学 美术 语文
4 音乐 语文 数学 美术 语文
赏

zxyaily