【前端就業課 第一階段】HTML5 零基礎到實戰（六）表格詳解

注意：手機（APP）打開，內容顯示更佳，不會的私聊博主即可
想要拿代碼或加入學習計劃（** 博主會監督你并且教你寫文章 **）的拉到最下面（PC端Web打開）加博主即可，目錄也在最下面。

參加1_bit博主前端學習計劃發文時再頭部記得機上本專欄鏈接，示例如下：

我已加入 1_bit 博主的免費前端 站起來 學習計劃，專欄鏈接：https://blog.csdn.net/a757291228/category_11609526.html

表格的使用

一、表格的基礎用法

🐶1_bit：小媛，這節課咱們學習表格的使用。

👸小媛：就是類似Excel表格那種嗎？

🐶1_bit：對的，在 HTML 中表格使用的標簽是 table 標簽。

👸小媛：是這樣寫吧 <table> </table>？

🐶1_bit：對的。表格的使用很簡單，一般在表格內有行和列，每個列都有自己的列名，例如如下截圖示例。
在這里插入圖片描述
🐶1_bit：這些列名在 table 中是使用 th 標簽來表示，但是這些列屬于同一個行，這個行在 table 標簽中也有表示，那就是使用 tr 標簽，例如如下代碼示例就是定義了列名。

<table><tr><th>昵稱</th><th>等級</th><th>戰力</th><th>種族</th></tr>
</table>

👸小媛：真簡單，其中的 th 標簽在 tr 里面意思就是 tr 就是一行，而每一個 th 標簽就是一個列名，每一個 th 標簽就包含了一個列名。

🐶1_bit：對的，那么咱們現在有了列名后，咱們可以給這些列添加一些內容，這些內容此時不是使用 th 標簽進行說明，而是使用 td 標簽，例如如下示例則是一個完整的基本表格示例。

<!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>1_bit 的前端實戰課程06 表格</title>
</head>
<body><table><tr><th>昵稱</th><th>等級</th><th>戰力</th><th>種族</th></tr><tr><td>萌王</td><td>未知</td><td>天花板</td><td>史萊姆</td></tr><tr><td>鹿娘</td><td>99</td><td>190000</td><td>獸族</td></tr><tr><td>萊茵</td><td>999</td><td>9990000</td><td>吸血鬼</td></tr></table>
</body>
</html>

👸小媛：哇，我發現了 tr 沒變，依舊是表示行，但是在內容中是使用 td 表示每一行的元素了。

二、結構化

🐶1_bit：是這樣的，這個就是一個最基本的表格了。一般來說可以使用 thead 、tbody、tfoot 標簽定義表的頭部，也就是 table head 表格頭部、tbody 表格主題、tfoot 表格尾部，使表格結構化（你可以理解為結構清晰、每個部分有對應的結構），表格可以寫成這樣。

<table>
<thead><tr><th>昵稱</th><th>等級</th><th>戰力</th><th>種族</th></tr>
</thead>
<tfoot><tr><td>萌王</td><td>未知</td><td>天花板</td><td>史萊姆</td></tr>
</tfoot>
<tbody><tr><td>鹿娘</td><td>99</td><td>190000</td><td>獸族</td></tr><tr><td>萊茵</td><td>999</td><td>9990000</td><td>吸血鬼</td></tr>
</tbody>

👸小媛：明白了，而且定義了 tfoot 的內容直接呈現在了底部。

三、邊框

🐶1_bit：咱們還可以使這些表格內容添加邊框，只需要給予 table 標簽的邊框屬性值即可，例如如下代碼。

<table border="1"><thead><tr><th>昵稱</th><th>等級</th><th>戰力</th><th>種族</th></tr></thead><tfoot><tr><td>萌王</td><td>未知</td><td>天花板</td><td>史萊姆</td></tr></tfoot><tbody><tr><td>鹿娘</td><td>99</td><td>190000</td><td>獸族</td></tr><tr><td>萊茵</td><td>999</td><td>9990000</td><td>吸血鬼</td></tr></tbody>
</table>

🐶1_bit：此時保存代碼運行將會顯示如下效果。
在這里插入圖片描述
👸小媛：奧，原來如此，原來給了 border 屬性一個值就會使表格添加邊框。

🐶1_bit：對的，border 對應修改的內容為邊框值，并且你可以更改不同的邊框值加粗或變細邊框粗細。

👸小媛：明白了。

🐶1_bit：除此之外，咱們還可以設置邊框的顏色，設置邊框的顏色使用 bordercolor 屬性，例如如下示例（重復代碼不再貼出）。

<table border="1" bordercolor="blue">

在這里插入圖片描述
👸小媛：哇，真好，還有什么玩法嗎？

四、邊距

🐶1_bit：當然，例如設置表格單元格之間的邊距，設置邊距使用屬性 cellspacing，例如如下示例。

<table border="1" bordercolor="blue" cellspacing="15">

在這里插入圖片描述
🐶1_bit：還可以設置單元格與內容之間的距離，一般情況下單元格都是距離內容緊挨著的，如果想要設置內容與單元格邊框的距離就可以使用 cellpadding 屬性。

<table border="1" bordercolor="blue" cellspacing="15" cellpadding="5">

在這里插入圖片描述
👸小媛：可是我總感覺這個表格少了什么東西。

🐶1_bit：你是想說表格標題嗎？

👸小媛：對對，是少了這個。

🐶1_bit：這個設置也超級簡單，在表格中添加一個標簽 caption 即可，例如如下示例。

<table border="1" bordercolor="blue" cellspacing="15" cellpadding="5"><caption>動漫戰斗力統計</caption><thead><tr><th>昵稱</th><th>等級</th><th>戰力</th><th>種族</th></tr></thead><tfoot><tr><td>萌王</td><td>未知</td><td>天花板</td><td>史萊姆</td></tr></tfoot><tbody><tr><td>鹿娘</td><td>99</td><td>190000</td><td>獸族</td></tr><tr><td>萊茵</td><td>999</td><td>9990000</td><td>吸血鬼</td></tr></tbody>
</table>

🐶1_bit：而且你會發現，不管這個 caption 放哪，只要在 table 之內，都會顯示在頭部這就是結構化。你還記得上一章學了一堆七七八八的東西但是從視覺角度并沒有呈現出什么明顯的效果，但是如果你從代碼中看可以知道哪里是頁腳、哪里是文章、哪里是標題等，這就是結構化的好處；像我們常規的一個網站，一般有一個導航欄，這個導航欄如果你用導航標簽定義后你從代碼上看一看就知道了，并且咱們的瀏覽器也知道；例如你定義了一個導航欄使用了導航標簽，這個時候如果是一個視覺不便的人在瀏覽一個網站時并不能看見哪里是導航欄，但是瀏覽器知道，在進行無障礙閱讀時就會語音播報當前頁面的結構，導航欄有哪些、是否要進入某個導航，這就是結構化的作用。（當然這個例子比較片面，在此只是作為一個舉例，便于理解其內容）

👸小媛：哇，原來是這么回事，上一節的問題我悟了。

🐶1_bit：悟了就行，咱們還可以設置當前表格的寬高，在 table 標簽中設置其屬性 width 和 height 即可，例如如下示例。

<table width="400" height="500" border="1" bordercolor="blue" cellspacing="15" cellpadding="5">

在這里插入圖片描述

五、背景色

🐶1_bit：當然你可以使用 bgcolor 屬性設置背景色。

<table bgcolor="yellow" width="400" height="500" border="1" bordercolor="blue" cellspacing="15" cellpadding="5">

在這里插入圖片描述
🐶1_bit：也可以指定某一行設置背景色。

<table bgcolor="yellow" width="400" height="500" border="1" bordercolor="blue" cellspacing="15" cellpadding="5"><caption>動漫戰斗力統計</caption><thead><tr><th>昵稱</th><th>等級</th><th>戰力</th><th>種族</th></tr></thead><tfoot><tr bgcolor="red"><td>萌王</td><td bgcolor="green">未知</td><td>天花板</td><td>史萊姆</td></tr></tfoot><tbody><tr><td>鹿娘</td><td>99</td><td>190000</td><td>獸族</td></tr><tr><td>萊茵</td><td>999</td><td>9990000</td><td>吸血鬼</td></tr></tbody>
</table>

在這里插入圖片描述

六、對齊方式

👸小媛：那可以設置水平對齊方式嗎？

🐶1_bit：可以的，例如你可以使用 align 屬性集體設置對齊方式或具體各行、列設置對齊都可以。

<table align="left" bgcolor="yellow" width="400" height="500" border="1" bordercolor="blue" cellspacing="15" cellpadding="5"><caption>動漫戰斗力統計</caption><thead><tr><th>昵稱</th><th>等級</th><th>戰力</th><th>種族</th></tr></thead><tfoot><tr bgcolor="red"><td>萌王</td><td bgcolor="green">未知</td><td>天花板</td><td>史萊姆</td></tr></tfoot><tbody align="right"><tr><td>鹿娘</td><td>99</td><td>190000</td><td>獸族</td></tr><tr><td align="center">萊茵</td><td>999</td><td>9990000</td><td>吸血鬼</td></tr></tbody>
</table>

在這里插入圖片描述

👸小媛：那垂直對齊呢？

🐶1_bit：當然也可以，垂直對其使用 valign 屬性，設置方法如下，使用 top、bottom、middle 值，分別對應頂部、底部以及中部（作用于行內）。

<table align="left" bgcolor="yellow" width="400" height="500" border="1" bordercolor="blue" cellspacing="15" cellpadding="5"><caption>動漫戰斗力統計</caption><thead valign="bottom"><tr><th>昵稱</th><th>等級</th><th>戰力</th><th>種族</th></tr></thead><tfoot><tr bgcolor="red"><td>萌王</td><td bgcolor="green">未知</td><td>天花板</td><td>史萊姆</td></tr></tfoot><tbody align="right"><tr><td valign="middle">鹿娘</td><td>99</td><td>190000</td><td>獸族</td></tr><tr><td align="center">萊茵</td><td>999</td><td>9990000</td><td>吸血鬼</td></tr></tbody></table>

在這里插入圖片描述

七、背景圖

👸小媛：明白了，還有什么特殊的功能嗎？

🐶1_bit：特殊呀那就是給這個單元格添加背景圖片，直接在 table 中添加 background 屬性就可以了，值就是圖片的路徑。

<table background="./img/1.png" align="left" bgcolor="yellow" width="400" height="500" border="1" bordercolor="blue" cellspacing="15" cellpadding="5">

在這里插入圖片描述
👸小媛：哈哈哈，好花呀，這個不算，還有啥嗎？

八、合并單元格

🐶1_bit：那就合并水平單元格？合并垂直的單元格？

👸小媛：勉強算你及格吧。

🐶1_bit：合并單元格只需要在某一個單元格 td 抱歉中添加一個 colspan 的屬性，并且指定合并單元格的數量即可，例如如下示例。

<table align="left" bgcolor="yellow" width="400" height="500" border="1" bordercolor="blue" cellspacing="15" cellpadding="5"><caption>動漫戰斗力統計</caption><thead valign="bottom"><tr><th>昵稱</th><th>等級</th><th>戰力</th><th>種族</th></tr></thead><tfoot><tr bgcolor="red"><td colspan="2">萌王 戰斗力 yyds</td><td>天花板</td><td>史萊姆</td></tr></tfoot><tbody align="right"><tr><td valign="middle">鹿娘</td><td>99</td><td>190000</td><td>獸族</td></tr><tr><td align="center">萊茵</td><td>999</td><td>9990000</td><td>吸血鬼</td></tr></tbody>
</table>

在這里插入圖片描述
👸小媛：這不就是表示占有幾個格嗎？垂直的怎么做呢？

🐶1_bit：垂直的只需要使用rowspan 屬性就可以了。

<table align="left" bgcolor="yellow" width="400" height="500" border="1" bordercolor="blue" cellspacing="15" cellpadding="5"><caption>動漫戰斗力統計</caption><thead valign="bottom"><tr><th>昵稱</th><th>等級</th><th>戰力</th><th>種族</th></tr></thead><tfoot><tr bgcolor="red"><td colspan="2">萌王 戰斗力 yyds</td><td>天花板</td><td>史萊姆</td></tr></tfoot><tbody align="right"><tr><td valign="middle">鹿娘</td><td rowspan="2">99</td><td>190000</td><td>獸族</td></tr><tr><td align="center">萊茵</td><td>9990000</td><td>吸血鬼</td></tr></tbody>
</table>

在這里插入圖片描述
🐶1_bit：好了，沒了，一點都沒了。

👸小媛：好的，問題不大，期待下一期學習。

目錄

【前端就業課 第一階段】HTML5 零基礎到實戰（九）列表
【前端就業課 第一階段】HTML5 零基礎到實戰（八）表單詳解
【前端就業課 第一階段】HTML5 零基礎到實戰（七）文字及圖片樣式
【前端就業課 第一階段】HTML5 零基礎到實戰（六）表格詳解
【前端就業課 第一階段】HTML5 零基礎到實戰（五）基礎元素
【前端就業課 第一階段】HTML5 零基礎到實戰（四）偽類與偽元素
【前端就業課 第一階段】HTML5 零基礎到實戰（三）一篇文CSS基礎入門
【前端就業課 第一階段】HTML5 零基礎到實戰（二）超鏈接
【前端就業課 第一階段】HTML5 零基礎到實戰（一）基礎代碼結構詳解

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/286560.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/286560.shtml
英文地址，請注明出處：http://en.pswp.cn/news/286560.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

PHP中file_put_contents()函數的兼容性問題

PHP中file_put_contents()函數的兼容性問題

PHP中file_put_contents()函數的兼容性問題 file_put_contents()函數就相當于依次使用fopen()&#xff0c;fwrite()和fclose()&#xff0c;真是個令人愉快的函數。我的第一個PHP小腳本中用到了這個函數&#xff0c;本地運行很正常&#xff0c;放到服務器上去之后點擊submit按鈕…
閱讀更多...
Android實戰：手把手實現“捧腹網”APP（一）-----捧腹網網頁分析、數據獲取

Android實戰：手把手實現“捧腹網”APP（一）-----捧腹網網頁分析、數據獲取

“捧腹網”頁面結構分析捧腹網M站地址: http://m.pengfu.com/捧腹網M站部分截圖&#xff1a; 從截圖中&#xff08;可以直接去網站看下&#xff09;&#xff0c;我們可以看出&#xff0c;該網站相對簡單&#xff0c;一共分為四個模塊&#xff1a;最新笑話、捧腹段子、趣圖、神…
閱讀更多...
專題2-通過按鍵玩中斷\第1課-中斷處理流程深度剖析-lesson1

專題2-通過按鍵玩中斷\第1課-中斷處理流程深度剖析-lesson1

中斷概念 1、中斷生命周期 串口先產生一個事件&#xff0c;該事件傳送到中斷控制器里面&#xff0c;中斷控制器會進行相應過濾&#xff0c;能通過過濾&#xff0c;那么就交給CPU去處理。 2、中斷源 2440芯片手冊 6410芯片手冊 3、中斷過濾 4、中斷處理 cpu處理方式有兩種&#…
閱讀更多...
Android之okdownload下載提示奔潰Expected URL scheme ‘http‘ or ‘https‘ but was ‘data‘

Android之okdownload下載提示奔潰Expected URL scheme ‘http‘ or ‘https‘ but was ‘data‘

1 問題 客戶現場奔潰在firebase上面提示錯誤信息如下 Fatal Exception: java.lang.IllegalArgumentException: Expected URL scheme http or https but was dataat okhttp3.t$a.a(HttpUrl.kt:38)at okhttp3.t$b.b(HttpUrl.kt:8)at okhttp3.y$a.b(Request.kt:5)at com.liulish…
閱讀更多...
mysql語法學習(一)__Instances__表

mysql語法學習(一)__Instances__表

2019獨角獸企業重金招聘Python工程師標準>>> ---建表 CREATE TABLE temp( id INT ); ----查詢表 SELECT * FROM temp_t; ---刪表 DROP TABLE temp; ---修改表名 ALTER TABLE temp_tt RENAME temp; ALTER TABLE temp RENAME TO temp_t; ALTER TABLE temp RENAME AS t…
閱讀更多...
【ArcGIS遇上Python】python批量獲取柵格數據四至（top，bottom，left，right）坐標代碼

【ArcGIS遇上Python】python批量獲取柵格數據四至（top，bottom，left，right）坐標代碼

上圖所示為ArcGIS自帶的影像數據，存放路徑為C:\Program Files (x86)\ArcGIS\Desktop10.6\ArcGlobeData\wsiearth.tif"，在源中可以查看該數據的四至坐標，那么，怎樣用python批量獲取多個柵格數據的四至坐標呢？ 參考閱讀：【ArcGIS風暴】ArcGIS求一個矢量圖層中多個圖斑…
閱讀更多...
使用 C# 讀取 zip 壓縮包解壓文件的方法及注意事項

使用 C# 讀取 zip 壓縮包解壓文件的方法及注意事項

從 .NET Framework 4.5 版本開始&#xff0c;微軟為 .NET 類庫增加了一個名為 ZipFile 的類型。該類型在 System.IO.Compression 命名空間下&#xff0c;提供創建、解壓縮和打開 zip 存檔的靜態方法。若要在 .NET Framework 應用中使用 ZipFile 類&#xff0c;必須添加對程序集…
閱讀更多...
CenterOS x64安裝serv-U

CenterOS x64安裝serv-U

1、下載serv-Usu - root cd / cd /src wget http://www.rhinosoft.com.cn/download/14.0.1.0/SU-MFTS-Linux-64bit.zip # 64bit下載地址wget http://www.rhinosoft.com.cn/download/14.0.1.0/SU-MFTS-Linux-32bit.zip # 32bit下載地址2、解壓serv-U安裝包unzip SU-MF…
閱讀更多...
Android實戰：手把手實現“捧腹網”APP（二）-----捧腹APP原型設計、實現框架選取

Android實戰：手把手實現“捧腹網”APP（二）-----捧腹APP原型設計、實現框架選取

APP原型設計在APP的開發過程中&#xff0c;原型設計是必不可少的。用戶界面原型必須在先啟階段的初期或在精化階段一開始建立。整個系統&#xff08;包括它的“實際”用戶界面&#xff09;的分析、設計和實施必須在原型建立后進行。 如何設計“捧腹網”APP呢&#xff1f;我們先…
閱讀更多...
【前端就業課 第一階段】HTML5 零基礎到實戰（七）文字及圖片詳解

【前端就業課 第一階段】HTML5 零基礎到實戰（七）文字及圖片詳解

注意&#xff1a;手機&#xff08;APP&#xff09;打開&#xff0c;內容顯示更佳&#xff0c;不會的私聊博主即可 想要拿代碼或加入學習計劃&#xff08;** 博主會監督你并且教你寫文章 **&#xff09;的拉到最下面&#xff08;PC端Web打開&#xff09;加博主即可&#xff0c;目…
閱讀更多...
自定義桌面右鍵菜單

自定義桌面右鍵菜單

一 編寫自定義右鍵菜單要執行的程序 只要是在 Windows 平臺上的可執行應用程序即可。 二 修改注冊表添加自定義右鍵菜單 添加位置如下&#xff1a; HKEY_CLASSES_ROOT\Directory\Background\shell 如下圖&#xff1a;轉載于:https://www.cnblogs.com/jRoger/articles/5799664.h…
閱讀更多...
Android之giide加載失敗提示You can‘t start or clear loads in RequestListener or Target callbacks If you‘re t

Android之giide加載失敗提示You can‘t start or clear loads in RequestListener or Target callbacks If you‘re t

1 問題 用glide進行加載視頻數據的時候，加載錯誤了再用glide進行加載一次，代碼如下 var iv = helper.getView<ImageView>(R.id.download_iv)iv?.let {val transform = RoundedCornersTransform(mContext, UnitUtils.dip2px(mContext, 12.toFloat()).toFloat())transf…
閱讀更多...
本地工程提交github

本地工程提交github

1. 首先在github上創建一個新的Repository 2. 在本地windows機器上裝上git 3. 建立一個文件夾&#xff0c;以后就用這個文件夾作為與Repository對應的庫文件夾 4. 輸入一下命令&#xff0c;建立文件夾與Repository的連接關系 touch README.md git init git add README.md git c…
閱讀更多...
【ArcGIS遇上Python】ArcGIS python計算長時間序列多個柵格數據的平均值

【ArcGIS遇上Python】ArcGIS python計算長時間序列多個柵格數據的平均值

通常&#xff0c;我們需要將多個柵格求平均&#xff0c;例如&#xff0c;將一年中每個月的NDVI值加起來除以12&#xff0c;就會等到月均NDVI&#xff0c;該過程雖然在柵格計算器中可以實現&#xff0c;但是當時間序列較長時就比較費事&#xff0c;此時&#xff0c;python代碼是…
閱讀更多...
統信 Deepin為什么要擺脫Ubuntu和Debian？

統信 Deepin為什么要擺脫Ubuntu和Debian？

文 | 大東出品 | OSC開源社區&#xff08;ID&#xff1a;oschina2013&#xff09;Deepin 出走 Debian 。近日&#xff0c;統信軟件宣布旗下 Linux 社區發行版 Deepin 將脫離上游 Debian&#xff0c;從 Linux Kernel 開始構建的新聞在社區引發了熱議。其實早在 7 年前&#xff0…
閱讀更多...
解決筆記本重裝問題（VISTA系統改為XP系統）

解決筆記本重裝問題（VISTA系統改為XP系統）

今天一位同事要我幫她的上網本重裝一下系統&#xff0c;經查看發現只是開機后一個出錯問題&#xff0c;是安裝酷狗軟件引起的&#xff0c;用360軟件管家徹底刪除就行了。這時&#xff0c;老大拿了一臺筆記本過來讓我幫忙裝XP操作系統&#xff0c;嘿~這下我的桌子擺滿了電腦&…
閱讀更多...
Android實戰：手把手實現“捧腹網”APP（三）-----UI實現，邏輯實現

Android實戰：手把手實現“捧腹網”APP（三）-----UI實現，邏輯實現

APP頁面實現根據原型圖&#xff0c;我們可以看出&#xff0c;UI分為兩部分&#xff0c;底部Tab導航上方列表顯示。 所以此處&#xff0c;我們通過 FragmentTabHostFragment&#xff0c;來實現底部的導航頁面&#xff0c;通過RecyclerView來實現列表頁面。 因為篇幅原因&#xf…
閱讀更多...
【前端就業課 第一階段】HTML5 零基礎到實戰（八）表單詳解

【前端就業課 第一階段】HTML5 零基礎到實戰（八）表單詳解

注意&#xff1a;手機&#xff08;APP&#xff09;打開&#xff0c;內容顯示更佳&#xff0c;不會的私聊博主即可 想要拿代碼或加入學習計劃&#xff08;** 博主會監督你并且教你寫文章 **&#xff09;的拉到最下面&#xff08;PC端Web打開&#xff09;加博主即可&#xff0c;目…
閱讀更多...
【ArcGIS遇上Python】ArcGIS10.6 python批量將柵格中的特定值替換Setnull為NoData

【ArcGIS遇上Python】ArcGIS10.6 python批量將柵格中的特定值替換Setnull為NoData

案例一： 如下圖所示為蘭州市dem，將圖一中高程大于1600m的像元值設置為無效（Setnull）之后的效果如圖二所示。 實現過程： 柵格計算器參考文章：《【ArcGIS風暴】ArcGIS 10.2柵格計算器實用公式大全（經典珍藏版）》，該文章中主要以ArcGIS102.為平臺講解柵格計算器的…
閱讀更多...
Android之實現Room升級需要給一個表增加一個字段

Android之實現Room升級需要給一個表增加一個字段

1、需求 實現Room升級需要給一個表增加一個字段。 2、Room升級介紹 Room 持久化庫中通過使用 Migration 類保存用戶數據。每個 Migration 類指定起始版本和結束版本。在運行時，Room 運行每個 Migration 類的 migrate() 方法，使用正確的順序將數據庫遷移到后面的版本 1、An…
閱讀更多...
最新文章

Copyright @ 2022~2023