How are tables created in HTML? (code example)-HTML Tutorial-php.cn

How are tables created in HTML? (code example)

藏色散人

Release： 2018-08-09 17:01:02

Original

11633 people have browsed it

Data tables are certainly no stranger to everyone. In addition to excel tables, there are also tables displayed in our website production. The function of the table is clear at a glance. In order to view data and statistics more directly, how is the table on the website's HTML page created? So this article will introduce to you a tutorial on making HTML tables.

We first introduce the relevant tags for making HTML tables:

Define HTML tables

Tags define the header of the table

Tag table body (text)

Tag defines the footer of the table (footnote or table note)

Element defines the table Row

tags define attribute values for one or more columns in the table. The

tag is used to group columns in a table for formatting purposes.

The specific codes for html table production and examples are as follows:

<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;
    }

    /*无边框表格*/
    .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;
    }

    /*复杂表格一*/
    .table-6{
        border: :1px solid #ccc;
        border-collapse: collapse;
    }
    .table-6 tr,.table-6 td{
        border: 1px solid #ccc;
    }

    /*复杂表格二*/
    .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>无边框表格：</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>复杂表格（一）</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>复杂表格（二）</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>

Copy after login

The effect is as shown below:

How are tables created in HTML? (code example)

So this article introduces the method of making HTML tables through the demonstration of table html code. Hope it helps those in need!

Element defines table title, which must immediately follow the table tag . Only one title can be defined for each table, which is centered above the table by default.
Element defines table header	Element defines table cell

The above is the detailed content of How are tables created in HTML? (code example). For more information, please follow other related articles on the PHP Chinese website!