Day9 HTML 常用标签: table

表格 (table)

表格是一个由列和栏组成的结构化资料(tabular data)。表格能帮助你快速查看不同资料类型间的关联值。
在HTML网页可使用表格元素table来显示表格。是所有表格元素的最外层,其余的表格元素如 thead、tbody、tr、th、td等都必须写在table里。

举个最基本的例子:

<table border="1">
 <tr>
 <td>表格范例</td>
 </tr>
</table>

程序执行後会显示:

而table中的标签按照以下顺序,组成表格:

  • 一个选择性的caption标签,用来表示表格的标题
  • 一个或多个选择性的colgroup标签,用来分组表格的直行以进行格式化
  • 一个选择性的thead标签,用来表示表格中不同直行的标题
  • 一个在以下的标签之前或之後选择性的tfoot标签,用来对表格中不同直行做分组,来指定不同分组内容的页脚或标题
  • 一个或多个选择性的tbody标签,做为表格主要内容的容器
  • 一个或多个必要的tr标签,用来定义表格的横列
  • 一个或多个必要的td(或th) 标签,用来表示表格中每一直行的单元格

表格、横列、直行

table、tr、td是HTML表格中最常见到也一定会用到的三个标签,table用来包着整个表格的结构和内容,tr用来定义表格有几个横列,tr里面有td用来定义表格有几个直行,至於td里是放实际单元格的资料。

让我们举个复杂一点的例子:

<!DOCTYPE html>
<html>
<head>    
<style>
table, th, td {
    border:1px solid 
}
</style>    
</head>
<body>

    <h1>火影忍者日中英文对照表</h1>

    <table>
        <thead>
            <tr>
                <th>中文名字</th>
                <th>日文名字</th>
                <th>英文名字</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>漩涡鸣人</td>
                <td>うずまきナルト</td>
                <td>Uzumaki Naruto</td>
            </tr>
            <tr>
                <td>宇智波佐助</td>
                <td>うちはサスケ</td>
                <td>Uchiha Sasuke</td>
            </tr>
            <tr>
                <td>日向雏田</td>
                <td>日向ヒナタ</td>
                <td>Hyuuga Hinata</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

程序执行後会显示:


<<:  7. 如何写好document

>>:  [Day 22] 针对API的单元测试(二)

[Android Studio 30天自我挑战] 透过Banner来轮播广告资讯

现在常常在手机或是电脑网页中会在页面中的一部分会看到不同的广告, 这篇我们运用banner在画面中显...

Day28-介接 API(番外篇 III)Dialogflow ES 之 Fulfillment 与 Events

大家好~ 今天会用实作的方式去认识 Dialogflow ES 的 Fulfillment 与 Ev...

不是进行渗透测试的最佳时机

机构更关心的是一个新类型的攻击比发现已知类型的攻击。此外,如果风险保留在风险记录中(风险保留),则表...

D28: 工程师太师了: 第14.5话

工程师太师了: 第14.5话 杂记: 伫列(queue)是一种利用FIFO(First In Fir...

Node.js安装

昨天介绍了Node.js,今天我们就要来实际安装Node.js啦 首先当然是到官网去下载Node.j...