HTML中復(fù)雜表格的制作方法

發(fā)布時(shí)間：2020-04-15 11:15:27 來(lái)源：億速云閱讀：1210 作者：小新欄目：web開(kāi)發(fā)

數(shù)據(jù)表格對(duì)于大家來(lái)說(shuō)肯定并不陌生。除了excel表格還有我們網(wǎng)站制作內(nèi)展現(xiàn)的表格。表格的作用都是一目了然，為了更直接的查看數(shù)據(jù)，統(tǒng)計(jì)數(shù)據(jù)，那么關(guān)于HTML中復(fù)雜表格的制作方法，你們知道嗎？這篇文章主要介紹了HTML中復(fù)雜表格的制作方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。

我們首先介紹下制作HTML表格的相關(guān)標(biāo)簽：

<table> 定義 HTML 表格

<thead> 標(biāo)簽定義表格的表頭

<tbody> 標(biāo)簽表格主體（正文）

<tfoot> 標(biāo)簽定義表格的頁(yè)腳（腳注或表注）

<tr> 元素定義表格行

<th> 元素定義表頭

<td> 元素定義表格單元

<caption> 元素定義表格標(biāo)題，必須緊隨 table 標(biāo)簽之后。只能對(duì)每個(gè)表格定義一個(gè)標(biāo)題，默認(rèn)居中與表格之上

<col> 標(biāo)簽為表格中一個(gè)或多個(gè)列定義屬性值。

<colgroup> 標(biāo)簽用于對(duì)表格中的列進(jìn)行組合，以便對(duì)其進(jìn)行格式化。

html表格制作及實(shí)例具體代碼如下：

<style type="text/css">
    /*公共樣式*/
    li{
        width: 600px;
        margin: auto;
        margin-top: 20px;
    }
    p{
        width: 600px;
        margin: auto;
    }
    table{
        width: 600px;
        margin: auto;
        text-align: center;
    }

    /*基本表格樣式*/
    .table-1{
        border: 1px solid #ccc;
        border-collapse: collapse;/*合并相鄰表格的間距*/

    }
    .table-1 tr,.table-1 td{
        border: 1px solid #ccc;
    }

    /*無(wú)邊框表格*/
    .table-2{
    }

    /*雙線表格*/
    .table-3{
        border: 1px solid #ccc;
    }
    .table-3 tr,.table-3 td{
        border: 1px solid #ccc;
    }

    /*合并表格列*/
    .table-4{
        border: 1px solid #ccc;
        border-collapse: collapse;/*合并相鄰表格的間距*/
    }
    .table-4 tr,.table-4 td{
        border: 1px solid #ccc;
    }

    /*合并表格行*/
    .table-5{
        border: :1px solid #ccc;
        border-collapse: collapse;
    }
    .table-5 tr,.table-5 td{
        border: 1px solid #ccc;
    }

    /*復(fù)雜表格一*/
    .table-6{
        border: :1px solid #ccc;
        border-collapse: collapse;
    }
    .table-6 tr,.table-6 td{
        border: 1px solid #ccc;
    }

    /*復(fù)雜表格二*/
    .table-7{
        border: :1px solid #ccc;
        border-collapse: collapse;
    }
    .table-7 tr,.table-7 td{
        border: 1px solid #ccc;
    }
</style>
<body>
<div class="container">
    <ol>
        <li>基本表格樣式：</li>
        <table class="table-1">
            <tr>
                <td>1.1</td>
                <td>1.2</td>
                <td>1.3</td>
            </tr>
            <tr>
                <td>2.1</td>
                <td>2.2</td>
                <td>2.3</td>
            </tr>
            <tr>
                <td>3.1</td>
                <td>3.2</td>
                <td>3.3</td>
            </tr>
        </table>

        <li>無(wú)邊框表格：</li>
        <table class="table-2">
            <tr>
                <td>1.1</td>
                <td>1.2</td>
                <td>1.3</td>
            </tr>
            <tr>
                <td>2.1</td>
                <td>2.2</td>
                <td>2.3</td>
            </tr>
            <tr>
                <td>3.1</td>
                <td>3.2</td>
                <td>3.3</td>
            </tr>
        </table>

        <li>雙線表格：</li>
        <table class="table-3">
            <tr>
                <td>1.1</td>
                <td>1.2</td>
                <td>1.3</td>
            </tr>
            <tr>
                <td>2.1</td>
                <td>2.2</td>
                <td>2.3</td>
            </tr>
            <tr>
                <td>3.1</td>
                <td>3.2</td>
                <td>3.3</td>
            </tr>
        </table>

        <li>合并表格列：</li>
        <table class="table-4">
            <tr>
                <!--未找到在css中的處理方式-->
                <td colspan="3">1.1</td>
            </tr>
            <tr>
                <td>2.1</td>
                <td>2.2</td>
                <td>2.3</td>
            </tr>
            <tr>
                <td>3.1</td>
                <td>3.2</td>
                <td>3.3</td>
            </tr>
        </table>
        <p>注：colspan在css中失效</p>

        <li>合并表格行：</li>
        <table class="table-5">
            <tr>
                <!--未找到在css中的處理方式-->
                <td rowspan="3">1.1</td>
                <td>1.2</td>
                <td>1.3</td>
            </tr>
            <tr>
                <td>2.2</td>
                <td>2.3</td>
            </tr>
            <tr>
                <td>3.2</td>
                <td>3.3</td>
            </tr>
        </table>
        <p>注：rowspan在css中失效</p>

        <li>復(fù)雜表格（一）</li>
        <table class="table-6">
            <tr>
                <!--未找到在css中的處理方式-->
                <td>1.1</td>
                <td colspan="2">1.2</td>
            </tr>
            <tr>
                <td>2.1</td>
                <td rowspan="2">2.2</td>
                <td>2.3</td>
            </tr>
            <tr>
                <td>3.1</td>
                <td>3.3</td>
            </tr>
        </table>

        <li>復(fù)雜表格（二）</li>
        <table class="table-7">
            <tr>
                <!--未找到在css中的處理方式-->
                <td>1.1</td>
                <td>1.2</td>
                <td>1.3</td>
            </tr>
            <tr>
                <td colspan="2">2.1</td>
                <td rowspan="2">2.3</td>
            </tr>
            <tr>
                <td>3.1</td>
                <td>3.2</td>
            </tr>
        </table>
    </ol>
</div>
</body>

效果如下圖：

HTML中復(fù)雜表格的制作方法

以上就是HTML中復(fù)雜表格的制作方法的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來(lái)億速云行業(yè)資訊！

向AI問(wèn)一下細(xì)節(jié)

HTML中復(fù)雜表格的制作方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽