當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

【温故知新】HTML学习笔记（表格）

發布時間：2025/3/20 HTML 24 豆豆

生活随笔收集整理的這篇文章主要介紹了【温故知新】HTML学习笔记（表格）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

表格Table

用來處理和顯示數據。
學習要求：能手寫表格結構，能合并單元格。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Table</title> </head> <body><table width="500" border="1"><tr><td>姓名</td><td>性別</td><td>電話</td></tr><tr><td>小王</td><td>男</td><td>1391591236</td></tr><tr><td>小金</td><td>女</td><td>15863251122</td></tr></table> </body> </html>

<table>里面只能裝<tr>（代表行），<tr>里面只能裝<td>（代表單元格）。
table的常用屬性：

border：表格的邊框（默認為border=“0”無邊框）；
cellspacing：單元格與單元格邊框之間的空白間距（默認2像素）；
cellpadding：單元格內容與單元格邊框之間的空白間距（默認1像素）；
width：表格的寬度（像素值）；
height：表格的高度（像素值）；
align：表格在網頁中的水平對齊方式（left、center、right）；

注意→正常三參為0：border、cellspacing、cellpadding設置為0

表頭標簽

<th> </th> 即表頭單元格，一般用于第一行或者第一列，其文本加粗居中。

表格標題

?? ?<table><caption>個人信息表</caption></table>

caption標簽必須緊隨table標簽之后（只存在表格里面），只能對每個表格定義一個標題。

表格結構

頭部：<thead> </thead>
主題：<tbody> </tbody>

合并單元格

跨行合并：rowspan 合并為列
跨列合并：colspan ? 合并為行

合并順序：自上而下，先左后右。
刪除的個數 = 合并的個數 - 1。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head><body><table ?width="400" height="100" border="1"> ?<tr><td>AA</td><td>BB</td><td>CC</td>?</tr><tr><td>AA</td><td>BB</td><td>CC</td>?</tr><tr><td>AA</td><td colspan="2">BB</td></tr></table></body> </html>

總結

以上是生活随笔為你收集整理的【温故知新】HTML学习笔记（表格）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【温故知新】HTML学习笔记（上）
下一篇：【温故知新】HTML学习笔记（下）