tft每日頭條

 > 生活

 > html設定表格單元格之間寬度屬性

html設定表格單元格之間寬度屬性

生活 更新时间:2024-09-02 23:25:41

今天我們說下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>

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

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
查看全部
上一页 下一页
小學語文集中教研觀摩...
從詩詞中取名女孩名字

相关生活资讯推荐

热门生活资讯推荐

网友关注

關于
條款和條件 隱私政策 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-2024 - www.tftnews.com All Rights Reserved