HTML로 테이블은 어떻게 생성되나요? (코드 예)-HTML 튜토리얼-php.cn

HTML로 테이블은 어떻게 생성되나요? (코드 예)

藏色散人

풀어 주다： 2018-08-09 17:01:02

원래의

11626명이 탐색했습니다.

데이터 테이블은 확실히 누구에게나 낯선 것이 아닙니다. Excel 표 외에도 당사 웹사이트 제작에 표시되는 표도 있습니다. 테이블의 기능은 한눈에 알 수 있습니다. 데이터와 통계를 좀 더 직접적으로 보기 위해, 웹사이트의 HTML 페이지에서 테이블은 어떻게 만들어지나요? 그래서 이번 글에서는 HTML 테이블 제작 튜토리얼을 소개하겠습니다.

먼저 HTML 테이블을 만들기 위한 관련 태그를 소개합니다:

HTML 테이블 정의

태그는 테이블의 헤더를 정의합니다.

< ;tfoot> 태그는 테이블의 바닥글(각주 또는 테이블 메모)을 정의합니다.

요소는 테이블 헤더를 정의합니다.

태그는 테이블에 있는 하나 이상의 열에 대한 속성 값을 정의합니다.

태그는 형식 지정을 위해 테이블의 열을 그룹화하는 데 사용됩니다.

html 테이블 제작을 위한 구체적인 코드와 예제는 다음과 같습니다.

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

로그인 후 복사

효과는 다음과 같습니다.

그래서 이번 글에서는 테이블 html 시연을 통해 HTML 테이블을 만드는 방법을 소개합니다. 암호. 도움이 필요한 분들에게 도움이 되기를 바랍니다!

HTML로 테이블은 어떻게 생성되나요? (코드 예)

요소는 테이블 단위를 정의합니다. ;caption> ; 요소는 테이블 제목을 정의하며 테이블 태그 바로 뒤에 와야 합니다. 각 테이블에는 하나의 제목만 정의할 수 있으며 기본적으로 테이블 위 중앙에 위치합니다.

위 내용은 HTML로 테이블은 어떻게 생성되나요? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!