首页
/
每日頭條
/
生活
/
html設定表格單元格之間寬度屬性
html設定表格單元格之間寬度屬性
更新时间：2026-07-31 11:31:33

今天我們說下HTML的表格結構标簽，包含<thead></thead>、<tbody></tbody>等。

  1. <thead></thead> 用于定義表格的頭部，<thead>内部必須包含<tr>标簽，一般是位于第一行。頭部區域
  2. <tbody></tbody>用于定義表格的主體，主要用于放數據本體。主題區域。
  3. 以上兩個标簽都是放在<table></table>标簽中

先看下效果:

html設定表格單元格之間寬度屬性（測試開發之前端--HTML）1

然後看下代碼:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<table align="center" width="500" height="250" border="1">

<thead>

<tr>

<th>id</th>

<th>name</th>

<th>sex</th>

<th>圖片</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>李世民</td>

<td>男</td>

<td><img src="HTML5.jpeg" width="200" height="150"></td>

</tr>

<tr>

<td>2</td>

<td>秦始皇</td>

<td>男</td>

</tr>

<tr>

<td>3</td>

<td>武則天</td>

<td>女</td>

</tr>

</tbody>

</table>

</body>

</html>

在<body>中，我們看到層次分明的三個部分

首先是頁面整體配置:

html設定表格單元格之間寬度屬性（測試開發之前端--HTML）2

然後是head部分

html設定表格單元格之間寬度屬性（測試開發之前端--HTML）3

接下來是tbody部分

html設定表格單元格之間寬度屬性（測試開發之前端--HTML）4

接下來說下合并單元格

特殊情況下，可以把多個單元格合并為一個單元格，隻需要了解簡單合并單元格就可以了。

  1. 合并單元格方式：跨行合并:rowspan="合并單元格的個數"跨列合并:colspam="合并單元格的個數"
  2. 目标單元格
  3. 合并單元格的步驟
  4. 跨行合并跨列合并

綜上顯示:

html設定表格單元格之間寬度屬性（測試開發之前端--HTML）5

目标單元格:

跨行:最上側單元格為目标單元格，寫合并代碼

跨列:最左側單元格為目标單元格，寫合并代碼

首先，需要先确定是跨行還是跨列合并

其次，找到目标單元格，寫上合并方式=合并的單元格數量，比如 <td colspan="2"></td>

最後，删除多餘的單元格

先創建一個3x3的單元格，代碼如下:

html設定表格單元格之間寬度屬性（測試開發之前端--HTML）6

對應代碼:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<h1>今天我們學習合并單元格</h1>

<body>

<h3>首先，我們先創建一個3x3的單元格</h3>

<table align="left" width="500" height="250" border="1" cellspacing="0">

<thead>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</thead>

<tbody>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</tbody>

</table>

</body>

</html>

按照上面的代碼試了一下，發現不行，重新寫了測試代碼

先看樣式:

html設定表格單元格之間寬度屬性（測試開發之前端--HTML）7

然後進行單元格合并:

html設定表格單元格之間寬度屬性（測試開發之前端--HTML）8

為啥我的是這樣呢，是準備合并第一行的第二列和第三列數據

先看下代碼:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<table width=500 height=200 border="1" cellspacing="0">

<tr>

<td></td>

<td colspan="2"></td>

<!--需要删除合并後多餘的表格-->>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

</body>

</html>

html設定表格單元格之間寬度屬性（測試開發之前端--HTML）9

發現是還沒有删除第三行的代碼，格子給擠出去了。現在看就好了

我們看下全部代碼:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<table width=500 height=200 border="1" cellspacing="0">

<tr>

<td></td>

<td colspan="2"></td>

<!--需要删除合并後多餘的表格-->>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

</body>

</html>

好的，今天就先到這裡，大家下周再見

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
相关案例
推荐阅读
南京遇害女孩父親公布錄音
南京遇害女孩父親公布錄音
近日，南京一女大學生李某月在雲南省勐海縣境内失聯，引發輿論廣泛關注。8月4日晚間，勐海警方發布最新通報稱，李某月的男友洪某（男，24歲，江蘇南京人）等有重大作案嫌疑。通報稱，初步查明，犯罪嫌疑人洪某與張某光（男，21歲，江蘇宿遷人）、曹某青...
2026-07-31
 一分鐘快速判斷腦卒中
一分鐘快速判斷腦卒中
腦卒中通常又被大家稱作“腦血管意外”，但是這一概念并不十分準确，它其實反映了人們認為腦卒中是突然發生的從而難以預防的錯誤概念。誤區一腦卒中是突然的腦卒中為突然起病，但并不意味着沒有預兆，大多數腦卒中發生前會有短暫腦缺血發作(TIA)，發生于...
2026-07-31
 孩子在什麼時間喝純牛奶最好
孩子在什麼時間喝純牛奶最好
很多家長會問到“寶寶多大可以把配方奶改成純牛奶呢？”通常情況下，我們聽到的建議都是在寶寶三歲以後可以喝純牛奶。但其實寶寶在一歲之後，就可以喝純牛奶了。很多家長可能會認為給孩子選擇純牛奶，會擔心孩子胃腸的吸收問題，怕純牛奶不易孩子消化吸收，沒...
2026-07-31
 紫玫瑰花語是什麼意思
紫玫瑰花語是什麼意思
紫玫瑰花語是什麼意思?紫玫瑰的花語蘊含了浪漫真情、迷戀、着迷、安靜、優雅高貴、憂郁等含義，今天小編就來聊一聊關于紫玫瑰花語是什麼意思?接下來我們就一起去研究一下吧!紫玫瑰花語是什麼意思紫玫瑰的花語蘊含了浪漫真情、迷戀、着迷、安靜、優雅高貴、...
2026-07-31
 看遠處東西模糊是近視加重了嗎
看遠處東西模糊是近視加重了嗎
圖蟲眼睛模糊就是近視嗎?當然不是！眼睛模糊可能存在的問題有以下幾種：屈光不正對于學生和有些人來說，眼睛模糊最有可能是屈光不正的表現。屈光不正包括近視、遠視、散光等。眼壓高也許你會遇到這種情況：趴着睡午覺眼睛被壓迫了，醒來後眼球充血、角膜變形...
2026-07-31
産後坐月子注意事項及禁忌
産後坐月子注意事項及禁忌
1
産後坐月子注意事項及禁忌
 2
那些年一起同居的日子
 3
紅酒有渣渣是怎麼回事
 4
張衛健版西遊記主演重聚
 5
孕七個月鼻塞喉嚨痛
 6
牛運霞水餃教學
 7
全亞洲最大教學樓
 8
外賣logo風格
 9
有這4種女人一生好運
 10
柯南令人誤會的瞬間
 11
植物大戰僵屍被公認的五大神器
 12
泗洪濕地美景圖
猜你喜欢
關于
條款和條件 隱私政策 Cookie 設置 聯系我們
服務
登陸 注冊
tft每日頭條 美食 生活 職場 母嬰 時尚 科技 汽車
友情鏈接
zpostcode Recruit weather mreligion Yellowpages sport constellation shopping name game directory literature Word tour furnish Lottery tftnews lyrics News digital car dir Edu Finance
Copyright 2023-2026 - www.tftnews.com All Rights Reserved