HTML 表格詳解（簡(jiǎn)單易懂較詳細(xì)）
發(fā)布時(shí)間：2025-03-12 09:36:30 作者：宇寒風(fēng)暖 
我要評(píng)論
我要評(píng)論HTML表格用于在網(wǎng)頁(yè)上展示數(shù)據(jù),通過(guò)標(biāo)簽及其相關(guān)標(biāo)簽來(lái)創(chuàng)建,表格由行和列組成,每一行包含一個(gè)或多個(gè)單元格,單元格可以包含文本、圖像、鏈接等元素,本文將詳細(xì)介紹HTML表格的創(chuàng)建方法、常用標(biāo)簽和屬性,以及如何通過(guò)CSS美化表格，感興趣的朋友一起看看吧
HTML 表格用于在網(wǎng)頁(yè)上展示數(shù)據(jù)，通過(guò) <table> 標(biāo)簽及其相關(guān)標(biāo)簽來(lái)創(chuàng)建。表格由行和列組成，每一行包含一個(gè)或多個(gè)單元格，單元格可以包含文本、圖像、鏈接等元素。本文將詳細(xì)介紹 HTML 表格的創(chuàng)建方法、常用標(biāo)簽和屬性，以及如何通過(guò) CSS 美化表格。
一、HTML 表格的基本結(jié)構(gòu)
一個(gè)簡(jiǎn)單的 HTML 表格由以下標(biāo)簽組成：
<table>
<tr>
<th>表頭 1</th>
<th>表頭 2</th>
</tr>
<tr>
<td>數(shù)據(jù) 1</td>
<td>數(shù)據(jù) 2</td>
</tr>
<tr>
<td>數(shù)據(jù) 3</td>
<td>數(shù)據(jù) 4</td>
</tr>
</table><table>：定義表格的開(kāi)始和結(jié)束。<tr>：定義表格中的一行。<th>：定義表格的表頭單元格，通常用于第一行，表示列的標(biāo)題。<td>：定義表格中的數(shù)據(jù)單元格，用于存放具體的數(shù)據(jù)。
二、HTML 表格的常用屬性
1. border
border 屬性用于設(shè)置表格的邊框。默認(rèn)情況下，表格沒(méi)有邊框。
<table border="1"> <!-- 表格內(nèi)容 --> </table>
2. cellpadding
cellpadding 屬性用于設(shè)置單元格內(nèi)容與單元格邊框之間的距離。
<table border="1" cellpadding="5"> <!-- 表格內(nèi)容 --> </table>
3. cellspacing
cellspacing 屬性用于設(shè)置單元格之間的間距。
<table border="1" cellpadding="5" cellspacing="0"> <!-- 表格內(nèi)容 --> </table>
4. width 和 height
width 和 height 屬性用于設(shè)置表格的寬度和高度。這些屬性可以以像素或百分比為單位設(shè)置。
<table border="1" width="500" height="200"> <!-- 表格內(nèi)容 --> </table>
三、HTML 表格的高級(jí)用法
1. 合并單元格
(1) colspan
colspan 屬性用于合并水平方向上的單元格。
<table border="1">
<tr>
<th colspan="2">表頭 1 和 2 合并</th>
</tr>
<tr>
<td>數(shù)據(jù) 1</td>
<td>數(shù)據(jù) 2</td>
</tr>
</table>(2) rowspan
rowspan 屬性用于合并垂直方向上的單元格。
<table border="1">
<tr>
<th rowspan="2">表頭 1</th>
<td>數(shù)據(jù) 1</td>
</tr>
<tr>
<td>數(shù)據(jù) 2</td>
</tr>
</table>2. 表格的頭部、主體和腳部
(1) <thead>
<thead> 標(biāo)簽用于定義表格的頭部，通常包含表頭單元格。
<table border="1">
<thead>
<tr>
<th>表頭 1</th>
<th>表頭 2</th>
</tr>
</thead>
<!-- 表格主體 -->
</table>(2) <tbody>
<tbody> 標(biāo)簽用于定義表格的主體，包含數(shù)據(jù)單元格。
<table border="1">
<thead>
<tr>
<th>表頭 1</th>
<th>表頭 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>數(shù)據(jù) 1</td>
<td>數(shù)據(jù) 2</td>
</tr>
<tr>
<td>數(shù)據(jù) 3</td>
<td>數(shù)據(jù) 4</td>
</tr>
</tbody>
</table>(3) <tfoot>
<tfoot> 標(biāo)簽用于定義表格的腳部，通常用于總結(jié)或總計(jì)行。
<table border="1">
<thead>
<tr>
<th>表頭 1</th>
<th>表頭 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>數(shù)據(jù) 1</td>
<td>數(shù)據(jù) 2</td>
</tr>
<tr>
<td>數(shù)據(jù) 3</td>
<td>數(shù)據(jù) 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>總計(jì)</td>
<td>100</td>
</tr>
</tfoot>
</table>3. 表格的樣式設(shè)計(jì)
(1) 使用內(nèi)聯(lián)樣式
<table border="1" style="border-collapse: collapse; width: 500px;">
<tr>
<th style="background-color: #f2f2f2; padding: 8px;">表頭 1</th>
<th style="background-color: #f2f2f2; padding: 8px;">表頭 2</th>
</tr>
<tr>
<td style="padding: 8px; text-align: center;">數(shù)據(jù) 1</td>
<td style="padding: 8px; text-align: center;">數(shù)據(jù) 2</td>
</tr>
<tr>
<td style="padding: 8px; text-align: center;">數(shù)據(jù) 3</td>
<td style="padding: 8px; text-align: center;">數(shù)據(jù) 4</td>
</tr>
</table>(2) 使用內(nèi)部樣式表
<style>
table {
border-collapse: collapse;
width: 500px;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
<table>
<tr>
<th>表頭 1</th>
<th>表頭 2</th>
</tr>
<tr>
<td>數(shù)據(jù) 1</td>
<td>數(shù)據(jù) 2</td>
</tr>
<tr>
<td>數(shù)據(jù) 3</td>
<td>數(shù)據(jù) 4</td>
</tr>
</table>(3) 使用外部樣式表
<!-- 在 HTML 文件中 -->
<link rel="stylesheet" type="text/css" href="styles.css">
<table class="custom-table">
<tr>
<th>表頭 1</th>
<th>表頭 2</th>
</tr>
<tr>
<td>數(shù)據(jù) 1</td>
<td>數(shù)據(jù) 2</td>
</tr>
<tr>
<td>數(shù)據(jù) 3</td>
<td>數(shù)據(jù) 4</td>
</tr>
</table>/* 在 styles.css 文件中 */
.custom-table {
border-collapse: collapse;
width: 500px;
}
.custom-table th, .custom-table td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
.custom-table th {
background-color: #f2f2f2;
}
.custom-table tr:nth-child(even) {
background-color: #f9f9f9;
}4. 響應(yīng)式表格
在移動(dòng)設(shè)備上，表格可能會(huì)超出屏幕寬度，影響用戶體驗(yàn)。通過(guò) CSS，可以實(shí)現(xiàn)響應(yīng)式表格，使其在小屏幕上也能良好顯示。
<style>
.responsive-table {
width: 100%;
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
<div class="responsive-table">
<table>
<tr>
<th>表頭 1</th>
<th>表頭 2</th>
<th>表頭 3</th>
<th>表頭 4</th>
</tr>
<tr>
<td>數(shù)據(jù) 1</td>
<td>數(shù)據(jù) 2</td>
<td>數(shù)據(jù) 3</td>
<td>數(shù)據(jù) 4</td>
</tr>
<tr>
<td>數(shù)據(jù) 5</td>
<td>數(shù)據(jù) 6</td>
<td>數(shù)據(jù) 7</td>
<td>數(shù)據(jù) 8</td>
</tr>
</table>
</div>四、HTML 表格的完整示例
以下是一個(gè)包含多種用法的完整 HTML 表格示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 表格示例</title>
<style>
.custom-table {
border-collapse: collapse;
width: 100%;
}
.custom-table th, .custom-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.custom-table th {
background-color: #4CAF50;
color: white;
}
.custom-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.custom-table tr:hover {
background-color: #f1f1f1;
}
.responsive-table {
width: 100%;
overflow-x: auto;
}
</style>
</head>
<body>
<h1>HTML 表格示例</h1>
<!-- 基本表格 -->
<h2>基本表格</h2>
<table border="1">
<tr>
<th>表頭 1</th>
<th>表頭 2</th>
</tr>
<tr>
<td>數(shù)據(jù) 1</td>
<td>數(shù)據(jù) 2</td>
</tr>
<tr>
<td>數(shù)據(jù) 3</td>
<td>數(shù)據(jù) 4</td>
</tr>
</table>
<!-- 合并單元格 -->
<h2>合并單元格</h2>
<table border="1">
<tr>
<th colspan="2">表頭 1 和 2 合并</th>
</tr>
<tr>
<td>數(shù)據(jù) 1</td>
<td>數(shù)據(jù) 2</td>
</tr>
<tr>
<td>數(shù)據(jù) 3</td>
<td>數(shù)據(jù) 4</td>
</tr>
</table>
<!-- 表格的頭部、主體和腳部 -->
<h2>表格的頭部、主體和腳部</h2>
<table border="1">
<thead>
<tr>
<th>表頭 1</th>
<th>表頭 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>數(shù)據(jù) 1</td>
<td>數(shù)據(jù) 2</td>
</tr>
<tr>
<td>數(shù)據(jù) 3</td>
<td>數(shù)據(jù) 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>總計(jì)</td>
<td>100</td>
</tr>
</tfoot>
</table>
<!-- 響應(yīng)式表格 -->
<h2>響應(yīng)式表格</h2>
<div class="responsive-table">
<table class="custom-table">
<thead>
<tr>
<th>表頭 1</th>
<th>表頭 2</th>
<th>表頭 3</th>
<th>表頭 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>數(shù)據(jù) 1</td>
<td>數(shù)據(jù) 2</td>
<td>數(shù)據(jù) 3</td>
<td>數(shù)據(jù) 4</td>
</tr>
<tr>
<td>數(shù)據(jù) 5</td>
<td>數(shù)據(jù) 6</td>
<td>數(shù)據(jù) 7</td>
<td>數(shù)據(jù) 8</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>五、總結(jié)
HTML 表格是網(wǎng)頁(yè)中展示數(shù)據(jù)的重要工具。通過(guò) <table>、<tr>、<th>、<td> 等標(biāo)簽，可以創(chuàng)建結(jié)構(gòu)清晰、樣式美觀的表格。以下是對(duì) HTML 表格相關(guān)標(biāo)簽和屬性的總結(jié)：
table>標(biāo)簽名描述示例<table>定義表格<table><tr>定義表格中的一行<tr><th>定義表格的表頭單元格<th><td>定義表格中的數(shù)據(jù)單元格<td><thead>定義表格的頭部<thead><tbody>定義表格的主體<tbody><tfoot>定義表格的腳部<tfoot>
| 屬性名 | 描述 | 示例 |
|---|---|---|
border | 設(shè)置表格的邊框 | <table border="1"> |
cellpadding | 設(shè)置單元格內(nèi)容與邊框之間的距離 | <table cellpadding="5"> |
cellspacing | 設(shè)置單元格之間的間距 | <table cellspacing="0"> |
width | 設(shè)置表格的寬度 | <table width="500"> |
height | 設(shè)置表格的高度 | <table height="200"> |
colspan | 合并水平方向上的單元格 | <th colspan="2"> |
rowspan | 合并垂直方向上的單元格 | <th rowspan="2"> |
通過(guò)合理使用這些標(biāo)簽和屬性，可以創(chuàng)建出結(jié)構(gòu)清晰、樣式美觀的 HTML 表格，滿足各種數(shù)據(jù)展示的需求。
到此這篇關(guān)于HTML 表格詳解（簡(jiǎn)單易懂較詳細(xì)）的文章就介紹到這了,更多相關(guān)html表格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
html table+css實(shí)現(xiàn)可編輯表格的示例代碼
本文主要介紹了html table+css實(shí)現(xiàn)可編輯表格的示例代碼，主要使用HTML5的contenteditable屬性，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2024-03-06
表格是日常常用的工具，很多時(shí)候需要用到單元合并，本文主要介紹了HTML表格合并的具體實(shí)現(xiàn)方式， 具有一定的參考價(jià)值，感興趣的可以了解一下2023-01-05- 這篇文章介紹了HTML中的表格元素，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-02-26
HTML中table表格拆分合并(colspan、rowspan)
這篇文章主要介紹了HTML中table表格拆分合并(colspan、rowspan),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編2021-04-07
這篇文章主要介紹了HTML表格跨行跨列操作(rowspan、colspan)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)2020-12-08
這篇文章主要介紹了HTML表格,包括表格的作用布局及格式問(wèn)題，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-31
html中table固定頭部表格tbody可上下左右滑動(dòng)
這篇文章主要介紹了html中table固定頭部表格tbody可上下左右滑動(dòng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-07-30
這篇文章主要介紹了詳解html中表格table的行列合并問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)2020-07-28HTML頁(yè)面自適應(yīng)寬度的table(表格)
這篇文章主要介紹了HTML頁(yè)面自適應(yīng)寬度的table(表格),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2020-06-16- 這篇文章主要介紹了html做表格只顯示表格的外邊框，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-20
