HTML中表格的知識(shí)點(diǎn)示例

這篇“HTML中表格的知識(shí)點(diǎn)示例”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對(duì)于“HTML中表格的知識(shí)點(diǎn)示例”，小編整理了以下知識(shí)點(diǎn)，請(qǐng)大家跟著小編的步伐一步一步的慢慢理解，接下來(lái)就讓我們進(jìn)入主題吧。

成都地區(qū)優(yōu)秀IDC服務(wù)器托管提供商(創(chuàng)新互聯(lián)).為客戶提供專業(yè)的德陽(yáng)電信服務(wù)器托管,四川各地服務(wù)器托管,德陽(yáng)電信服務(wù)器托管、多線服務(wù)器托管.托管咨詢專線：13518219792

html有什么特點(diǎn)

1、簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便，適合初學(xué)前端開(kāi)發(fā)者使用。 2、可擴(kuò)展性：超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語(yǔ)言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。 3、平臺(tái)無(wú)關(guān)性：超級(jí)文本標(biāo)記語(yǔ)言能夠在廣泛的平臺(tái)上使用，這也是萬(wàn)維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語(yǔ)言，它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類型的電腦或?yàn)g覽器。

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

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

是一個(gè)雙標(biāo)簽。一個(gè)表格中包含<table>、<tr>、<td>三個(gè)基本元素。首標(biāo)簽<table>和尾標(biāo)簽</table>表示一個(gè)表格的開(kāi)始和結(jié)束。'tr=table row'用于表示一行的開(kāi)始和結(jié)束,'td=table data'用來(lái)表示行中個(gè)單元格的開(kāi)始和結(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)題單元格是沒(méi)有邊框的，默認(rèn)居中顯示。

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

表格邊框--border

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

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

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

默認(rèn)情況下，文字緊貼邊框。通過(guò)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>中國(guó)</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>中國(guó)</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>

HTML中表格的知識(shí)點(diǎn)示例

行合并屬性--rowspan

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

<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>招生簡(jiǎn)章</caption>
    <tr>
        <td rowspan="3">基礎(chǔ)科目</td>
        <td>數(shù)學(xué)</td>
    </tr>
    <tr>
        <td>外語(yǔ)</td>
    </tr>
    <tr>
        <td>政治</td>
    </tr>
    <tr>
    <td>專業(yè)課</td>
    <td bgcolor="#bc8f8f">100</td>
</table>
</body>
</html>

HTML中表格的知識(shí)點(diǎn)示例

列合并屬性--colspan

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

<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>長(zhǎng)安區(qū)</td>
        <td>雁塔區(qū)</td>
        <td>碑林區(qū)</td>
    </tr>
    <tr>
        <td>新城區(qū)</td>
        <td>高新區(qū)</td>
        <td>蓮湖區(qū)</td>
    </tr>

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

HTML中表格的知識(shí)點(diǎn)示例

表格的嵌套

一個(gè)表格內(nèi)部包含其他標(biāo)簽，用表格來(lái)排版頁(yè)面，可以使頁(yè)面各個(gè)部分互不沖突，整體結(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>百度圖庫(kù)</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

HTML中表格的知識(shí)點(diǎn)示例

以上是“HTML中表格的知識(shí)點(diǎn)示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：HTML中表格的知識(shí)點(diǎn)示例
轉(zhuǎn)載來(lái)于：http://muchs.cn/article40/pdpgho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、企業(yè)建站、網(wǎng)站營(yíng)銷、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計(jì)公司、企業(yè)網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容