HTML table 用法

Question

因為使用表格來顯示數據可讀性較高，也非常整齊一致，特別是當你網站專門用來顯示數據在前端都會使用表格來呈現數據效果是最好的，所以是否熟練使用表格就顯得很重要了，經過表格就能把一大坨雜亂的數據放到他們該有的行和列中讓自己或是給別人看就顯得乾淨清爽。

目錄 Show

HTML 如何創建 table 表格 ?
HTML Table 標籤還原縮寫意思
HTML 标签功能绘制表格使用；如果是做后台管理的用户列表等类似 Excel 功能，这个标签是最佳的选择标签定义 HTML 表格一个 HTML 表格包括元素，一个或多个、元素定义表格行
浏览器支持
注意事项
HTML4 与 HTML5 之间的差异
全局属性
事件属性
table 的基本使用
1.<table>
2.<th>、<tr>和<td>
3.<thead>、<tbody> 以及 <tfoot>
练习作业

雖然使用 div 佈局也可以做到用來展示數據，但你用起來就沒有表格來的方便快速又有效率，所以這個表格標籤還一直存在並在 HTML5 中還給了它更多增強功能，所以現在知道了表格的重要性了吧。

HTML 如何創建 table 表格 ?

創建表格語法:

  <table>

    <tr>
       <td>單元格文字</td>
	...

    </tr>
    ...

  </table>

要了解表格標籤，首先要想想表格是由那些東西所組成形成的

表格 ( table )
行 ( tr )
單元格 ( td )

在上面語法中包含了基本三對，HTML 標籤幾乎都是成雙成對居多，<table>、<tr>、<td> 它們是創建表格的基本標籤缺一不可，只要有缺少這三對標籤就會產生顯示不出來或是出現問題，在下面會進行更詳細解釋一開始先有個概念就好。

<table> 表格標籤就是表格的外框，如沒有外框是不是就不能顯示了，所以最重要
<tr> 行標籤是用來定義表格中的行，如果你要需要三行顯示，就要使用三次 <tr> 行標籤，必須嵌套在 <table></table> 表格標籤裡頭
<td> 單元格標籤是用來顯示數據內容的地方，需要嵌套在 <tr></tr> 行標籤裡頭

HTML Table 標籤還原縮寫意思

<table> 表格標籤
<tr> 縮寫原意 table row ( 表格中的行 )
<td> 縮寫原意 table data ( 表格中的單元格 )
<th> 縮寫原意 table header ( 表格中的表頭 )

小總結

表格的主要目的就是用來顯示數據的
一個完整的表格，標籤有表格標籤 <table>、行標籤 <tr>、單元格標籤 <td> 所組成
<tr></tr> 必須嵌套在 <table></table> 表格標籤裡頭，也就是<tr>行標籤要被包在<table>裡頭
<tr></tr> 行標籤裡頭只能嵌套 <td></td>
<td></td> 單元格標籤裡頭就像是一個容器，通常都會放數據

以上就是table表格標籤的最基本用法，當你完成後你會覺得說怎麼我寫出來的表格是那麼的陽春，沒錯不用懷疑這是很正常的，沒有加入任何表格屬性現在呈現出來的表格是沒有框線的，如果你要加入框線或是邊框、內部字體移動，小青會在下一節帶你了解更加進階的的寫法才會讓你表格看起來更加豐富。

HTML 标签功能绘制表格使用；如果是做后台管理的用户列表等类似 Excel 功能，这个标签是最佳的选择标签定义 HTML 表格一个 HTML 表格包括元素，一个或多个、元素定义表格行

HTML

以及元素。

元素定义表头

元素定义表格单元

更复杂的 HTML 表格也可能包括

标签用法

一个简单的 HTML 表格，包含两列两行：

<table border="1">
    <tr>
        <th>网站名</th>
        <th>网址</th>
    </tr>
    <tr>
        <td>阿西河前端教程</td>
        <td>www.axihe.com</td>
    </tr>
</table>复制代码

HTML

标签演示网站名网址阿西河前端教程www.axihe.com

浏览器支持

所有主流浏览器都支持标签。

注意事项

虽然现在 DIV+CSS 布局非常流行，是取代 table 布局的好选择；

但是遇到 table 相关的东西，还是使用table标签更佳，请根据实际场景进行选择

HTML4 与 HTML5 之间的差异

在 HTML5 中，仅支持 "border" 属性，并且只允许使用值 "1" 或 ""。

属性

属性
值
描述
align
left
center
right
HTML5 不支持。HTML4 已废弃。规定表格相对周围元素的对齐方式。bgcolor
rgb(x,x,x)
#xxxxxx
colorname
HTML5 不支持。HTML4 已废弃。规定表格的背景颜色。
border
1
""
规定表格单元是否拥有边框。
cellpaddingpixels
HTML5 不支持。规定单元边沿与其内容之间的空白。
cellspacingpixels
HTML5 不支持。规定单元格之间的空白。
frame
void
above
below
hsides
lhs
rhs
vsides
box
borderHTML5 不支持。规定外侧边框的哪个部分是可见的。
rules
none
groups
rows
cols
all
HTML5 不支持。规定内侧边框的哪个部分是可见的。
summary
text
HTML5 不支持。规定表格的摘要。
width
pixels
%
HTML5 不支持。规定表格的宽度。

全局属性

标签支持 HTML 全局属性。

事件属性

标签支持 HTML 事件属性

本文参考HTML中文帮助文档

<table>使用语境--MDN

<table> 在HTML 中定义了表格布局。
说到 table 标签，我们可以想到的大致有以下几个元素：
<tr>、


  <table border="1" >
    <caption>table</caption>
    <tr>
      <th></th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <th>女生</th>
      <td>张莉</td>
      <td>22</td>
    </tr>
    <tr>
      <th>男生</th>
      <td>杨洋</td>
      <td>26</td>
    </tr>
  </table>

0、


  <table border="1" >
    <caption>table</caption>
    <tr>
      <th></th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <th>女生</th>
      <td>张莉</td>
      <td>22</td>
    </tr>
    <tr>
      <th>男生</th>
      <td>杨洋</td>
      <td>26</td>
    </tr>
  </table>

1、


  <table border="1" >
    <caption>table</caption>
    <tr>
      <th></th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <th>女生</th>
      <td>张莉</td>
      <td>22</td>
    </tr>
    <tr>
      <th>男生</th>
      <td>杨洋</td>
      <td>26</td>
    </tr>
  </table>

2、


  <table border="1" >
    <caption>table</caption>
    <tr>
      <th></th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <th>女生</th>
      <td>张莉</td>
      <td>22</td>
    </tr>
    <tr>
      <th>男生</th>
      <td>杨洋</td>
      <td>26</td>
    </tr>
  </table>

3、


  <table border="1" >
    <caption>table</caption>
    <tr>
      <th></th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <th>女生</th>
      <td>张莉</td>
      <td>22</td>
    </tr>
    <tr>
      <th>男生</th>
      <td>杨洋</td>
      <td>26</td>
    </tr>
  </table>

4
接下来，我们看看每个元素有什么用，使用后会有怎样的效果。

table 的基本使用

1.<table>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
<style>
  table{
  height:300px,
  width:300px
  }
</style>
</head>
<body>
  <table border="1" >
    <caption>table</caption>
  </table>
</body>
</html>

有标题的 table

table 的属性如：border、width、height 等，建议写在 css 样式中。


  <table border="1" >
    <caption>table</caption>
    <tr>
      <th></th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <th>女生</th>
      <td>张莉</td>
      <td>22</td>
    </tr>
    <tr>
      <th>男生</th>
      <td>杨洋</td>
      <td>26</td>
    </tr>
  </table>

5 元素可以设置表格的标题

2.<th>、<tr>和<td>

一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。

<tr> 元素定义表格行
<th> 元素定义表头
<td> 元素定义表格单元
表格由单元格与其内部的文本构成。
HTML 表格有两类单元格：
表头单元 - 包含头部信息（由 th 元素创建）
标准单元 - 包含数据（由 td 元素创建）
<th> 定义表格内的表头单元格，元素内部的文本通常会呈现为居中的粗体文本。
<td> 定义 HTML 表格中的标准单元格，元素中的文本一般显示为正常字体且左对齐。


  <table border="1" >
    <caption>table</caption>
    <tr>
      <th></th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <th>女生</th>
      <td>张莉</td>
      <td>22</td>
    </tr>
    <tr>
      <th>男生</th>
      <td>杨洋</td>
      <td>26</td>
    </tr>
  </table>

简单的 table

colspan 属性规定单元格可横跨的列数。
rowspan 属性规定单元格可横跨的行数。

<table border="1">
<caption>横跨两列的单元格</caption>
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<table border="1">
<caption>横跨两行的单元格</caption>
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

3.<thead>、<tbody> 以及 <tfoot>

<thead><tbody><tfoot> 把表格分成多个逻辑区域，以便之后可以用 CSS 更好的控制表现。

thead 元素用于对 HTML 表格中的表头内容进行分组
tbody 元素用于对 HTML 表格中的主体内容进行分组
tfoot 元素用于组合 HTML 表格中的页脚（脚注或表注）内容

<html>
<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red}
</style>
</head>
<body>
<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
</body>
</html>

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
** 注释 **：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

以上就是 table 的基本用法，接下来让我们来完成关于 table 的练习作业吧！

练习作业

任务地址：https://bbs.excellence-girls.org/topic/62/任务1-html核心概念和常用标签-创建一个纯html的试卷页面-2周
任务需求：

需求

我们先把该表格按下图分为三部分：

这三部分则分别放在 thead、tfoot 以及 tbody 元素内。
可以看出表格大致有五行四列，其中名称、小计跨行，而日期、总价跨列。
粗体文字的单元格为表头单元，使用 <th>，其他的使用<td>。
代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>table</title>
 </head>
 <body>
  <table border="1">
    <caption>购物车</caption>
  <thead>
    <tr>
        <th rowspan="2" >名称</th>
        <th colspan="2" >2016-11-22</th>
        <th rowspan="2" >小计</th>
    </tr>   
    <tr>
        <th>重量</th>
        <th>单元</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
        <th colspan="3" >总价</th>
        <td>27元</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
        <th>苹果</th>
        <td>3公斤</td>
        <td>5元/公斤</td>
        <td>15元</td>
    </tr>
    <tr>
        <th>香蕉</th>
        <td>2公斤</td>
        <td>6元/公斤</td>
        <td>12元</td>
    </tr>
  </tbody>
</table>
 </body>
</html>

等等，这就完成了吗？看看需求，我们可以看到每个单元格看起来文本都是居中的，而上面说到 <td> 内的文本是默认居左的。
我们尝试给 <td> 加上 css 样式，设置其高度和宽度，可以清楚的看到文本是居左的。

<style>
td {
  height:30px;
  width:100px
  }
</style>

首先我们尝试的解决方式是让 <td> 内的文本居中。

<style>
td{
  height:30px;
  width:100px;
  text-align:center;
  }
</style>

可以看到文本居中了，但新的问题是需求中的单元格并不是宽度一致的，因此我们应该采用另一种方式：表格内边距。有两种方式可以做到：

css 中的 padding
cellpadding 属性,规定单元边沿与其内容之间的空白。

从实用角度出发，最好不要规定 cellpadding，而是使用 CSS 来添加内边距。

<style>
th,td {
  padding:10px;
  }
</style>

或者

<table border="1" cellpadding="10">

</table>

为单元格加了 padding 的 table

至此该练习完成。

如果有不对的地方请指出 -

HTML table border html table表格 Table border html table教程 html table样式 html table美化 html table居中 html table合并单元格

HTML table 用法

HTML 如何創建 table 表格 ?

HTML Table 標籤還原縮寫意思

小總結

HTML 标签功能绘制表格使用；如果是做后台管理的用户列表等类似 Excel 功能，这个标签是最佳的选择标签定义 HTML 表格一个 HTML 表格包括元素，一个或多个、元素定义表格行

HTML

HTML

浏览器支持

注意事项

HTML4 与 HTML5 之间的差异

属性

全局属性

事件属性

table 的基本使用

1.<table>

2.<th>、<tr>和<td>

3.<thead>、<tbody> 以及 <tfoot>

练习作业

相關文章

HTML 图片排版

W hotel 海鮮之夜訂位

廣告

最新消息

向達倫大冒險小說

Athletic意思

Jbl蓝牙耳机配对

遇到小猫怎么办？

銀行風險性資產

氣炸鍋不合格名單

忠孝復興捷運站2號出口

中山醫院探病時間

Hiv抗体检测结果

民事訴訟法第258條

廣告

Populer

廣告

關於

合法的

幫助

社會的

HTML table 用法

HTML 如何創建 table 表格 ?

HTML Table 標籤還原縮寫意思

小總結

HTML 标签功能绘制表格使用；如果是做后台管理的用户列表等类似 Excel 功能，这个标签是最佳的选择标签定义 HTML 表格一个 HTML 表格包括元素，一个或多个 、 元素定义表格行

HTML

HTML

浏览器支持

注意事项

HTML4 与 HTML5 之间的差异

属性

全局属性

事件属性

table 的基本使用

1.<table>

2.<th>、<tr>和<td>

3.<thead>、<tbody> 以及 <tfoot>

练习作业

相關文章

廣告

最新消息

廣告

Populer

廣告

關於

合法的

幫助

社會的

HTML 标签功能绘制表格使用；如果是做后台管理的用户列表等类似 Excel 功能，这个标签是最佳的选择标签定义 HTML 表格一个 HTML 表格包括元素，一个或多个、元素定义表格行