HTML - html 表格（二）-CFANZ编程社区

HTML - html 表格（二）

一、HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

二、HTML 表格标签

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

三、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<!--table 是表格标签，border="1" 表示边框，tr 表示一行，td 表示单元格内容，th 表示字体加粗-->
<table border="1">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>sex</th>
    </tr>
    <tr>
        <td>1</td>
        <td>理想</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>张三</td>
        <td>男</td>
    </tr>
</table>

<table border="1">
    <!--tfoot 表示在表格的末尾-->
    <tfoot>
    <tr>
        <td>人数</td>
        <td>5</td>
    </tr>
    </tfoot>

    <!--tbody 表示是表格的内容-->
    <tbody>
    <tr>
        <td>12</td>
        <td>haha</td>
        <td>男</td>
    </tr>
    </tbody>

    <!--thead 表示是表格的表头-->
    <thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>sex</th>
    </tr>
    </thead>
</table>

</body>
</html>

实际效果如下图：

0 条评论