HTML 表格元素

简介

定义一个表格,由 table 元素以及子元素组成;
包括基本的 tr,th,td 元素以及结构性的 caption、col、colgroup、thead、tfoot 和 tbody 元素。

标签

标签 说明
table 定义一个表格
caption 定义表格标题
colgroup 列组合格式化,不需要重复为每个单元格或每一行设置样式
col 规定 <colgroup> 元素每一列的属性
thead 规定表格表头内容,必须作为 <table> 元素的子元素
tfoot 规定表格页脚内容,必须作为 <table> 元素的子元素
tbody 规定表格页脚内容,必须作为 <table> 元素的子元素
tr 表格中的行,必须作为 <table> 元素的子元素
td 表格中数据单元格
th 表格中头部单元格

实例

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格例子</title>
    <style type="text/css">
       tfoot {
            color: red;
        }
       table {
            text-align: center;
            width: 50%;
            margin-bottom: 30px;
      }
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" class="table-style">
    <caption>水平标题</caption>
    <tr>
        <th>标题1</th>
        <th>标题2</th>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
</table>
<table cellspacing="0" cellpadding="0" class="table-style">
    <caption>垂直标题</caption>
    <tr>
        <th>标题1</th>
        <td>内容1</td>
    </tr>
    <tr>
        <th>标题2:</th>
        <td>内容2</td>
    </tr>
</table>
<table cellspacing="0" cellpadding="0" class="table-style">
    <colgroup>
        <col span="2" style="background-color:lightyellow">
        <col style="background-color:yellow">
    </colgroup>
    <thead class="thead-style ">
    <caption>colgroup 和 col</caption>
    <tr>
        <th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
    </tr>
    <tr>
        <td>内容3</td>
        <td>内容4</td>
        <td>内容5</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>内容5</td>
        <td>内容6</td>
        <td>内容7</td>
    </tr>
    </tfoot>
</table>
<table cellspacing="0" cellpadding="0" class="table-style">
    <caption>thead、tbody和tfoot</caption>
    <thead class="thead-style">
    <tr>
        <th>标题1</th>
        <th>标题2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
    <tr>
        <td>内容3</td>
        <td>内容4</td>
    </tr>
    </tbody>
    <tfoot class="tfoot-style">
    <tr>
        <td>内容5</td>
        <td>内容6</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

效果:

水平标题
标题1 标题2
内容1 内容2
垂直标题
标题1 内容1
标题2: 内容2
colgroup 和 col
标题1 标题2 标题3
内容1 内容2 内容3
内容3 内容4 内容5
内容5 内容6 内容7
thead、tbody和tfoot
标题1 标题2
内容1 内容2
内容3 内容4
内容5 内容6

留下评论

电子邮件地址不会被公开。 必填项已用*标注