1、HTML表格

表格標(biāo)簽

標(biāo)簽說(shuō)明table表格caption標(biāo)題thead表頭（語(yǔ)義劃分）tbody表身（語(yǔ)義劃分）tfoot表腳（語(yǔ)義劃分）tr行th表頭單元格td表行單元格語(yǔ)法：

<table> <capti" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 用html5網(wǎng)頁(yè)制作表格有沒(méi)有簡(jiǎn)單方法？

用html5網(wǎng)頁(yè)制作表格有沒(méi)有簡(jiǎn)單方法？

時(shí)間：2024-02-15 03:10:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-15 03:10:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

用html5網(wǎng)頁(yè)制作表格有沒(méi)有簡(jiǎn)單方法？：第6章 表格

1、HTML表格

表格標(biāo)簽

標(biāo)簽說(shuō)明
table表格
caption標(biāo)題
thead表頭（語(yǔ)義劃分）
tbody表身（語(yǔ)義劃分）
tfoot表腳（語(yǔ)義劃分）
tr行
th表頭單元格
td表行單元格
語(yǔ)法：

<table> <caption>表格標(biāo)題</caption> <thead> <tr> <th>表頭單元格1</th> <th>表頭單元格2</th> </tr> </thead> <tbody> <tr> <td>表行單元格1</td> <td>表行單元格2</td> </tr> <tr> <td>表行單元格3</td> <td>表行單元格4</td> </tr> </tbody> <tfoot> <tr> <td>表行單元格5</td> <td>表行單元格6</td> </tr> </tfoot></table> 2、合并行與合并列

在HTML中，我們可以使用rowspan屬性來(lái)合并行，可以使用colspan屬性來(lái)合并列。

案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .tab1 { width: 300px; height: 100px; border: 1px solid gray; /* CSS==border-callapse */ border-collapse: collapse; } .tab1 td { border: 1px solid gray; } .tab2 { width: 300px; height: 100px; border: 5px solid gray; border-collapse: collapse; } .tab2 td { border: 1px solid gray; height: 33.33%; width: 33.33% } .tab3 { border: 4px double gray; width: 300px; height: 100px; border-collapse: collapse; } .tab3 td { border: 1px solid gray; width: 33.33%; height: 33.33% } .tab4 { width: 300px; height: 100px; border-spacing: 10px; } .tab4 td { border: 1px solid gray; } .tab5 { width: 300px; height: 100px; border-spacing: 0px; border-top: 1px solid gray } .tab5 td { border-bottom: 1px solid gray; } .tab6 { width: 300px; height: 300px; border: 1px solid gray; border-spacing: 10px; padding: 10px } .tab6 td { background-color: deepskyblue; } .last { empty-cells: hide; } </style></head><body> <!-- 表格1 --> <h1>1-細(xì)線邊框</h1> <table class="tab1"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <h1>2-粗線邊框</h1> <table class="tab2"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <h1>3-雙邊框</h1> <table class="tab3"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <h1>4-工資表格</h1> <table class="tab4"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <h1>5-單線表格</h1> <table class="tab5"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <h1>6-日歷表格</h1> <table class="tab6"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td class="last"></td> </tr> </table></body></html>

關(guān)鍵詞：簡(jiǎn)單,方法,表格

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉