HTML表格

LearningHTML表格 creation and 表格元素 using

1. HTML表格overview

HTML表格 is 用于展示structure化data important tool, 它允许我们以行 and 列 形式组织data, 使data更加清晰易读.

1.1 表格 basicstructure

表格 basicstructureusing<table>tag来定义, package含行 and 单元格: 

<table>
    <tr>  
        <th>表头单元格</th>
        <th>表头单元格</th>
    </tr>
    <tr>  
        <td>data单元格</td>
        <td>data单元格</td>
    </tr>
</table>

example表格:

姓名 年龄 城市
张三 25 北京
李四 30 on 海
王五 28 广州

2. 表格元素

2.1 basic表格元素

  • <table>: 定义表格
  • <tr>: 定义表格行
  • <th>: 定义表头单元格 (默认加粗居in)
  • <td>: 定义data单元格

2.2 表格structure元素

  • <thead>: 定义表格头部
  • <tbody>: 定义表格主体
  • <tfoot>: 定义表格底部
<table>
    <thead>
        <tr>
            <th>产品</th>
            <th>价格</th>
            <th>library存</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>手机</td>
            <td>5999元</td>
            <td>100</td>
        </tr>
        <tr>
            <td>电脑</td>
            <td>8999元</td>
            <td>50</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总计</td>
            <td>14998元</td>
            <td>150</td>
        </tr>
    </tfoot>
</table>

example表格:

产品 价格 library存
手机 5999元 100
电脑 8999元 50
总计 14998元 150

3. 表格property

3.1 单元格merge

3.1.1 行merge (rowspan) 

<table>
    <tr>
        <th>姓名</th>
        <th>课程</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td rowspan="2">张三</td>
        <td>数学</td>
        <td>95</td>
    </tr>
    <tr>
        <td>英语</td>
        <td>90</td>
    </tr>
</table>

example表格:

姓名 课程 成绩
张三 数学 95
英语 90

3.1.2 列merge (colspan) 

<table>
    <tr>
        <th colspan="3">学生成绩表</th>
    </tr>
    <tr>
        <th>姓名</th>
        <th>数学</th>
        <th>英语</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>95</td>
        <td>90</td>
    </tr>
</table>

example表格:

学生成绩表
姓名 数学 英语
张三 95 90

3.2 other表格property

<table border="1" width="100%" cellspacing="0" cellpadding="10">
    <tr>
        <th align="left" valign="top">姓名</th>
        <th align="center" valign="middle">年龄</th>
        <th align="right" valign="bottom">城市</th>
    </tr>
    <tr>
        <td align="left" valign="top">张三</td>
        <td align="center" valign="middle">25</td>
        <td align="right" valign="bottom">北京</td>
    </tr>
</table>

example表格:

姓名 年龄 城市
张三 25 北京

4. 表格样式

虽然HTMLproviding了一些表格property, 但现代网页Developmentin, 我们通常usingCSS来设置表格样式.

4.1 basic表格样式

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 12px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #f5f5f5;
}

4.2 advanced表格样式

/* 带阴影 表格 */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 带彩色表头 表格 */
th {
    background-color: #4285F4;
    color: white;
    font-weight: bold;
    padding: 15px;
}

/* response式表格 */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
    }
}

实践case: creation一个员工information表格

creation一个完整 员工information表格, package含以 under in 容: 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工information表</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        th {
            background-color: #4285F4;
            color: white;
            font-weight: bold;
        }
        
        tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        
        tr:hover {
            background-color: #e3f2fd;
        }
        
        .department {
            font-weight: bold;
            background-color: #f1f3f4;
        }
        
        @media (max-width: 768px) {
            table {
                display: block;
                overflow-x: auto;
            }
        }
    </style>
</head>
<body>
    <h1>员工information表</h1>
    <table>
        <thead>
            <tr>
                <th>员工ID</th>
                <th>姓名</th>
                <th>部门</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>月薪</th>
            </tr>
        </thead>
        <tbody>
            <tr class="department">
                <td colspan="6">techniques部</td>
            </tr>
            <tr>
                <td>E001</td>
                <td>张三</td>
                <td>techniques部</td>
                <td>advanced工程师</td>
                <td>2020-01-15</td>
                <td>15000元</td>
            </tr>
            <tr>
                <td>E002</td>
                <td>李四</td>
                <td>techniques部</td>
                <td>工程师</td>
                <td>2021-03-10</td>
                <td>12000元</td>
            </tr>
            <tr>
                <td>E003</td>
                <td>王五</td>
                <td>techniques部</td>
                <td>初级工程师</td>
                <td>2022-06-01</td>
                <td>8000元</td>
            </tr>
            <tr class="department">
                <td colspan="6">市场部</td>
            </tr>
            <tr>
                <td>E004</td>
                <td>赵六</td>
                <td>市场部</td>
                <td>市场经理</td>
                <td>2019-11-05</td>
                <td>13000元</td>
            </tr>
            <tr>
                <td>E005</td>
                <td>孙七</td>
                <td>市场部</td>
                <td>市场专员</td>
                <td>2021-08-20</td>
                <td>9000元</td>
            </tr>
            <tr class="department">
                <td colspan="6">人力resource部</td>
            </tr>
            <tr>
                <td>E006</td>
                <td>周八</td>
                <td>人力resource部</td>
                <td>HR经理</td>
                <td>2020-05-12</td>
                <td>12000元</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">员工总数</td>
                <td>6人</td>
            </tr>
            <tr>
                <td colspan="5">平均月薪</td>
                <td>11500元</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

5. 表格 best practices

5.1 语义化表格

  • using<thead>, <tbody> and <tfoot>元素来structure化表格
  • using<th>元素serving as表头, 而不 is <td>元素
  • for complex 表格添加<caption>元素providing表格标题

5.2 可访问性考虑

  • for 表格添加适当 scopeproperty, 指明表头 作用范围
  • for complex 表格using<th>元素 idproperty and <td>元素 headersproperty
  • 确保表格可以through键盘导航
<table>
    <caption>学生成绩表</caption>
    <thead>
        <tr>
            <th scope="col">姓名</th>
            <th scope="col">数学</th>
            <th scope="col">英语</th>
            <th scope="col">语文</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">张三</th>
            <td>95</td>
            <td>90</td>
            <td>85</td>
        </tr>
        <tr>
            <th scope="row">李四</th>
            <td>88</td>
            <td>92</td>
            <td>90</td>
        </tr>
    </tbody>
</table>

5.3 performance and response式考虑

  • 避免creation过于 complex 表格 (过 many 行 and 列)
  • usingCSS而非HTMLproperty来设置表格样式
  • for small 屏幕设备designresponse式表格
  • 考虑usingother布局方式 (such asCSS Grid or Flexbox) 来替代表格布局

互动练习: creation一个产品销售表格

1. creation一个HTML表格, 展示产品销售data, package含以 under in 容:
  1. 表格标题: 产品销售statistics表
  2. 表头行: 产品名称, 一月, 二月, 三月, 四月, 总计
  3. 至 few 3个产品 销售data
  4. using行merge or 列merge来组织data
  5. 添加表格底部显示总销售额
2. 确保表格具 has 以 under features:
  • using语义化表格structure (thead, tbody, tfoot)
  • 添加适当 CSS样式, 使表格美观易读
  • 确保表格 in move设备 on 也能正常显示
  • usingscopepropertyimproving可访问性

6. 表格 替代solutions

in 某些circumstances under , using表格可能不 is 最佳选择, 特别 is for 于布局目 . 以 under is 一些替代solutions:

6.1 CSS Grid

CSS Grid is a现代 布局system, 非常适合creation complex 二维布局: 

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.grid-item {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

6.2 Flexbox

Flexbox适合creation一维布局, such as导航栏, 卡片listetc.: 

.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.flex-item {
    flex: 1 1 300px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

推荐阅读

on 一节: HTML表单 under 一节: HTML语义化