HTML5表格語(yǔ)法格式詳解
發(fā)布時(shí)間：2025-04-21 16:54:01 作者：EX_C 
我要評(píng)論
我要評(píng)論在HTML語(yǔ)法中，表格主要通過(guò)< table >、< tr >和< td >3個(gè)標(biāo)簽構(gòu)成,本文通過(guò)實(shí)例代碼講解HTML5表格語(yǔ)法格式，感興趣的朋友一起看看吧
一、表格
在HTML語(yǔ)法中，表格主要通過(guò)< table >、< tr >和< td >3個(gè)標(biāo)簽構(gòu)成。
表格標(biāo)簽為< table >，行的標(biāo)簽為< tr >，表項(xiàng)的標(biāo)簽為< td >。
1.表格語(yǔ)法格式
<table border="邊框?qū)捑? width="表格寬度" height="表格高度" bordercolor="邊框顏色" align="頁(yè)面對(duì)齊方式" bgcolor="背景顏色">
<caption align="表格中對(duì)齊方式">標(biāo)題</caption>
<tr>
<th scope="col">表頭</th>
<th scope="col">表頭</th>
<th scope="col">表頭</th>
</tr>
<tr>
<th scope="row">表頭</th>
<td>表項(xiàng)</td>
<td>表項(xiàng)</td>
</tr>
</table>< caption >標(biāo)簽必須緊隨< table >標(biāo)簽之后，為每個(gè)標(biāo)簽指定唯一標(biāo)題。
2.表格屬性
| border | 表格邊框?qū)挾?/td> |
| width | 表格寬度 |
| heigh | 表格長(zhǎng)度 |
| align | 表格相對(duì)周邊對(duì)齊方式 |
| bordercolor | 邊框顏色 |
| bgcolor | 背景顏色 |
| scope | 表示單元格是列（low）、行（row）的表頭 |
3.例子
運(yùn)行代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<table border="1" width="600" height="600" bordercolor="blue" align="center" bgcolor="#cccccc">
<caption align="center">成績(jī)單</caption>
<tr align="center">
<td></td>
<th scope="col">教師人數(shù)</th>
<th scope="col">學(xué)生人數(shù)</th>
<th scope="col">總?cè)藬?shù)</th>
</tr>
<tr align="center">
<th scope="row">2021年</td>
<td>40</td>
<td>400</td>
<td>440</td>
</tr>
<tr align="center">
<th scope="row">2022年</th>
<td>100</td>
<td>1500</td>
<td>1600</td>
</tr>
<tr align="center">
<th scope="row">2023年</th>
<td>100</td>
<td>1500</td>
<td>1600</td>
</tr>
<tr align="center">
<th scope="row">2024年</th>
<td>200</td>
<td>4000</td>
<td>4200</td>
</tr>
</table>
</body>
</html>運(yùn)行結(jié)果如下：
二、不規(guī)則表格
使用 colspan 和 rowspan 屬性用于建立不規(guī)則表格
1.跨行
<table>
<tr>
<td rowspan="所跨的行數(shù)">單元格內(nèi)容</td>
</tr>
</table>rowspan 指明該單元格應(yīng)有多少行的跨度，在 th 和 tr 標(biāo)簽中使用。
2.跨列
<table>
<tr>
<td colspan="所跨的行數(shù)">單元格內(nèi)容</td>
</tr>
</table>colspan 指明該單元格應(yīng)有多少列的跨度，在 th 和 tr 標(biāo)簽中使用。
注：跨越的單元格占用了原來(lái)的單元格要?jiǎng)h除掉
3.例子
運(yùn)行代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>不規(guī)則表格</title>
</head>
<body>
<table border="1" width="400" height="200">
<tr>
<td></td>
<th scope="col">教師人數(shù)</th>
<th scope="col">學(xué)生人數(shù)</th>
<th scope="col">總?cè)藬?shù)</th>
</tr>
<tr>
<th scope="row">2021年</th>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<th scope="row">2022年</th>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">2023年</th>
<td colspan="2" rowspan="2"></td>
<td></td>
</tr>
<tr>
<th scope="row">2024年</th>
<td></td>
</tr>
</table>
</body>
</html>運(yùn)行結(jié)果如下：
到此這篇關(guān)于HTML5表格的文章就介紹到這了,更多相關(guān)html5表格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
使用html5實(shí)現(xiàn)表格實(shí)現(xiàn)標(biāo)題合并的實(shí)例代碼
在前端開發(fā)中經(jīng)常會(huì)遇到標(biāo)題合并的需求，今天小編給大家?guī)?lái)了使用html5實(shí)現(xiàn)表格實(shí)現(xiàn)標(biāo)題合并的實(shí)例代碼，感興趣的朋友跟隨小編一起看看吧2019-05-13- 本文給大家分享基于html制作的漂亮表格，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-11-15