tft每日頭條

 > 生活

 > html表格基礎布局教案

html表格基礎布局教案

生活 更新时间:2024-09-12 08:36:36

目标

  1. 表格标題如何設置?
  2. 表格在前端代碼裡的完整結構?
  3. 表格如何合并?

表格标題如何設置?

使用wps制作表格的時候,一般都會起個标題。标題使用caption标簽,位置放在table标簽内的第一行。

<caption>我是表格的标題</caption>

html表格基礎布局教案(HTML基礎篇--12表格)1

設置表格标題

表格在前端代碼裡的完整結構?

表格除了标題外,實際上就是由3部分構成的。表頭(頁眉)、表體(主體)、表尾(頁腳)

1、表頭

<thead></thead>

html表格基礎布局教案(HTML基礎篇--12表格)2

表頭

2、表體

<tbody></tbody>

html表格基礎布局教案(HTML基礎篇--12表格)3

表體

3、表尾

<tfoot></ftood>

html表格基礎布局教案(HTML基礎篇--12表格)4

表尾

完整代碼如下

html表格基礎布局教案(HTML基礎篇--12表格)5

table完整結構

表格如何合并?

單元格合并一共有2種方式,跨行合并和跨列合并

1、跨行合并--rowspan屬性

<tr> <th>姓名</th> <th>電話</th> </tr> <tr> <td rowspan="2">小明</td> <td>123</td> </tr> <tr> <td>321</td> </tr>

html表格基礎布局教案(HTML基礎篇--12表格)6

跨行合并

2、跨列合并--colspan屬性

<tr> <th>姓名</th> <th colspan="2">電話</th> </tr> <tr> <td >小明</td> <td>123</td> <td>321</td> </tr>

html表格基礎布局教案(HTML基礎篇--12表格)7

跨列合并

無論是跨行合并還是跨列合并,本質都是占用别的行或者列,實際上是破壞了表格的正常結構,尤其是在書寫代碼的時候,前面占用合并了幾個,後面就要缺少幾個。

總結

html表格基礎布局教案(HTML基礎篇--12表格)8

table進階

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved