明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML中表格相關(guān)知識的說明（代碼案例）

發(fā)表時間：2023-08-30 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章給大家?guī)淼膬?nèi)容是關(guān)于HTML中表格相關(guān)知識的介紹（代碼實例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。制作網(wǎng)頁時，要合理規(guī)劃網(wǎng)頁布局。比如，在網(wǎng)頁中添加一個表格，可分為上、中、下三部分，上部存放網(wǎng)頁標(biāo)題或LOGO圖片，中間部分是整個網(wǎng)頁的主體內(nèi)容，底部就是相關(guān)制作信...
本篇文章給大家?guī)淼膬?nèi)容是關(guān)于HTML中表格相關(guān)知識的介紹（代碼實例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

制作網(wǎng)頁時，要合理規(guī)劃網(wǎng)頁布局。比如，在網(wǎng)頁中添加一個表格，可分為上、中、下三部分，上部存放網(wǎng)頁標(biāo)題或LOGO圖片，中間部分是整個網(wǎng)頁的主體內(nèi)容，底部就是相關(guān)制作信息。此外，單元格里還可再添加單元格，將內(nèi)容分類別、分層次合理規(guī)劃。

表格標(biāo)簽--table

是一個雙標(biāo)簽。一個表格中包含<table>、<tr>、<td>三個基本元素。首標(biāo)簽<table>和尾標(biāo)簽</table>表示一個表格的開始和結(jié)束。'tr=table row'用于表示一行的開始和結(jié)束,'td=table data'用來表示行中個單元格的開始和結(jié)束。

<table>
<tr>
    <td>單元格內(nèi)容</td>
    <td>單元格內(nèi)容</td>
</tr>
<tr>
    <td>單元格內(nèi)容</td>
    <td>單元格內(nèi)容</td>
</tr>
...
</table>

表格的標(biāo)題--caption

有一種特殊的單元格叫做標(biāo)題單元格，位于表格的第一行，標(biāo)題單元格是沒有邊框的，默認(rèn)居中顯示。

<caption>表格的標(biāo)題</caption>

表格邊框--border

默認(rèn)情況下，表格不顯示邊框。為了更好的區(qū)分內(nèi)容，可以設(shè)置表格邊框?qū)挾却笮。?/p>

<table border='邊框?qū)傩?#39;>

表格內(nèi)文字與邊框的距離--cellpadding

默認(rèn)情況下，文字緊貼邊框。通過cellpadding可以調(diào)整文字與邊框之間的距離

<table cellpadding='文字與邊框的距離'>

表格中單元格之間的距離--cellspacing

表格中單元格之間的距離也可以變化。

<table cellspacing='單元格之間的距離'>

單元格背景圖像--background

<table background='圖片'>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小白</title>
</head>
<body>
<p>默認(rèn)情況下的表格</p>
<table border="2" align="center">
    <caption>亞洲</caption>
    <tr>
        <td>中國</td>
        <td>北京</td>
        <td>1949年10月1日</td>
    </tr>
    <tr>
        <td>緬甸</td>
        <td>內(nèi)比都</td>
        <td>1948年1月4日</td>
    </tr>
</table>
<hr/>
<p>設(shè)置屬性后的表格</p>
<!--bgcolor：行背景顏色-->
<table cellpadding="15" cellspacing="10" border="2" bgcolor="#8fbc8f" align="center">
    <caption>亞洲</caption>
    <tr>
        <td>中國</td>
        <td>北京</td>
        <td>1949年10月1日</td>
    </tr>
    <tr>
        <td>緬甸</td>
        <td>內(nèi)比都</td>
        <td>1948年1月4日</td>
    </tr>
</table>
</body>
</html>

885512020-5bb74f04581d2_articlex.png

行合并屬性--rowspan

在制作一些復(fù)雜的表格時，需要用到單元格合并

<td row='需要合并的行數(shù)'>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>單元格行合并</title>
</head>
<body>
<table border="1" align="center" width="600" height="300">
    <caption>招生簡章</caption>
    <tr>
        <td rowspan="3">基礎(chǔ)科目</td>
        <td>數(shù)學(xué)</td>
    </tr>
    <tr>
        <td>外語</td>
    </tr>
    <tr>
        <td>政治</td>
    </tr>
    <tr>
    <td>專業(yè)課</td>
    <td bgcolor="#bc8f8f">100</td>
</table>
</body>
</html>

3012902053-5bb74f6c24509_articlex.png

列合并屬性--colspan

在制作一些復(fù)雜的表格時，需要用到單元格合并

<td row='需要合并的列數(shù)'>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>單元格列合并</title>
</head>
<body>
<table border="1" align="center" width="600" height="300" cellpadding="30">
    <tr>
        <td colspan="3" align="center">西安</td>
    </tr>
    <tr>
        <td>長安區(qū)</td>
        <td>雁塔區(qū)</td>
        <td>碑林區(qū)</td>
    </tr>
    <tr>
        <td>新城區(qū)</td>
        <td>高新區(qū)</td>
        <td>蓮湖區(qū)</td>
    </tr>

</table>
</body>
</html>

1868244905-5bb74fd09d55d_articlex.png

表格的嵌套

一個表格內(nèi)部包含其他標(biāo)簽，用表格來排版頁面，可以使頁面各個部分互不沖突，整體結(jié)構(gòu)優(yōu)美。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格嵌套</title>
</head>
<body>
<table bgcolor="#8fbc8f" align="center">
    <caption>示例</caption>
    <tr>
        <td>曇花</td>
        <td>
            <img src="flower_02.jpg" height="300" width="200">
        </td>
        <td>
            <img src="flower_02.jpg" height="300" width="200">
        </td>
    </tr>
    <tr>
        <td>瀏覽器</td>
        <td>
            <a href="http://www.baidu.com" style="color: #f10180">百度</a>
        </td>
        <td bgcolor="#bc8f8f">
            <table border="1">
                <tr>
                    <td>百度貼吧</td>
                    <td>百度網(wǎng)盤</td>
                    <td>百度圖庫</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

3276253443-5bb7500326568_articlex.png

以上就是本篇文章的全部內(nèi)容，敢于HTML的相關(guān)知識大家可以參考PHP中文網(wǎng)的HTML開發(fā)手冊進行學(xué)習(xí)。

以上就是HTML中表格相關(guān)知識的介紹（代碼實例）的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。