連續一周沒怎麼更新了，今天我們繼續HTML的學習，表格標籤。表格是實際開發中常用的一種標籤類型，會說到表格標籤的主要作用和基本語法。
主要作用: 表格主要用於顯示、展示數據，因為它可以讓數據展示的非常規整，可讀性非常好，特別是後台展示數據的時候，能夠熟練運用表格非常重要。一個清爽簡約的表格可以把複雜的數據表現的很簡單。表格不是用來布局頁面的，而是用來展示數據的。
表格的基本語法: <table><tr><td></td></tr></table>
<table></table>用來定義表格標籤
<tr></tr>用於定義表格中的行，嵌套在<table>標籤中使用
<td></td>用於定義表格中的單元格，嵌套在<tr>標籤中使用，字母td指表格數據(table data),即數據單元格的內容。
我們來展示一個例子，比如 數據庫中有三個字段，分別為 姓名 性別和年齡，如果想用前端將這三個字段的數據展示出來，應該怎麼操作呢？
先看效果:
然後我們看下代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>20210829—</title>
</head>
<body>
<table>
<tr> <td>姓名</td> <td>性別</td> <td>年齡</td> </tr>
</table>
</body>
</html>
這次開始使用vs code來編輯代碼了，感覺比sublime line高級一些，但是相對的也麻煩點。可以看到，在前端頁面展示了 姓名、性別和年齡。然後我們添加一行數據，看效果:
民族英雄黃飛鴻如果還活着，應該也是一位非常高壽的宗師了。多加幾個數據
讓我們看看代碼有什麼不同
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>20210829—</title>
</head>
<body>
<table>
<tr> <td>姓名</td> <td>性別</td> <td>年齡</td> </tr>
<tr> <td>黃飛鴻</td> <td>男</td> <td>188</td> </tr>
<!–再多創建幾個數據–>>
<tr><td>鬼腳七</td> <td>男</td> <td>186</td> </tr>
<tr><td>梁寬</td> <td>男</td> <td>33</td> </tr>
</table>
</body>
</html>
可以看到，就是將之前的數據進行了複製而已。
接着我們說下表頭單元格標籤，一般表頭單元格位於表頭的第一行或第一列，表頭單元格裏面的文本內容，加粗居中表示。
<th>標籤表示HTML表格的表頭部分，table head的縮寫
我們先來看下效果:
再看下對應的代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>20210829—</title>
</head>
<body>
<table>
<!–HTML表格的表頭標籤，內容加粗居中展示–>>
<tr> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr>
<tr> <td>黃飛鴻</td> <td>男</td> <td>188</td> </tr>
<!–再多創建幾個數據–>>
<tr><td>鬼腳七</td> <td>男</td> <td>186</td> </tr>
<tr><td>梁寬</td> <td>男</td> <td>33</td> </tr>
</table>
</body>
</html>
就是將表格表頭那一行的<td>都換成了<th>，可以看到表頭每個字段都已經居中並且加粗了。
最後我們說下表格的屬性，其實表格標籤屬性這部分用的不多，一般都是用css樣式來設置。例如表格的邊框、大小等。我們需要關注的表格屬性目的，有2點:
- 記住英文顯示名稱，之後使用css樣式會用到
- 直觀感受表格的外觀狀態
align 屬性值: left right center 對應表格相對周圍元素的對齊方式
border 屬性值 1或”” (空) 規定表格單元是否有邊框，默認為空，表示沒有邊框
cellpadding 像素值 規定單元邊沿與其內容之間的空白，默認1像素
cellspacing 像素值 規定單元格之間的空白，默認1像素
width 像素值或百分比 規定表格的寬度
我們來看下效果:
來看下代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>20210829—</title>
</head>
<body>
<table align=”center” border=1 cellpadding=1 cellspacing=1 width=500>
<!–HTML表格的表頭標籤，內容加粗居中展示–>>
<tr> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr>
<tr> <td>黃飛鴻</td> <td>男</td> <td>188</td> </tr>
<!–再多創建幾個數據–>>
<tr><td>鬼腳七</td> <td>男</td> <td>186</td> </tr>
<tr><td>梁寬</td> <td>男</td> <td>33</td> </tr>
</table>
</body>
</html>
記住，屬性都是在table處添加和修改的，因為我們是對整個table的設置值。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/252619.html
微信掃一掃 
支付寶掃一掃 