欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5表格語法格式詳解

  發(fā)布時間：2025-04-21 16:54:01   作者：EX_C   我要評論
在HTML語法中，表格主要通過< table >、< tr >和< td >3個標(biāo)簽構(gòu)成,本文通過實(shí)例代碼講解HTML5表格語法格式，感興趣的朋友一起看看吧

一、表格

在HTML語法中，表格主要通過< table >、< tr >和< td >3個標(biāo)簽構(gòu)成。

表格標(biāo)簽為< table >，行的標(biāo)簽為< tr >，表項(xiàng)的標(biāo)簽為< td >。

1.表格語法格式

    <table border="邊框?qū)捑? width="表格寬度" height="表格高度" bordercolor="邊框顏色" align="頁面對齊方式" bgcolor="背景顏色">
        <caption align="表格中對齊方式">標(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)簽之后，為每個標(biāo)簽指定唯一標(biāo)題。

2.表格屬性

border表格邊框?qū)挾?/td>
width表格寬度
heigh表格長度
align表格相對周邊對齊方式
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">成績單</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)簽中使用。

注：跨越的單元格占用了原來的單元格要刪除掉

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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論