Tag: table

  • HTML 테이블 표현 방법

    HTML 테이블 표현 방법

    엑셀과 같은 형식을 표현하려면 HTML에서는 테이블이라는 태그를 사용합니다.

    기본 테이블(Basic table) : table, tr 및 td 요소
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Basic table</title>
    <style>
        td {
            border: 1px solid #999;
            padding: 0.1em 1em;
        }
    </style>
</head>
<body>

    <table>
        <tr>
            <td>Cats</td>
            <td>Dogs</td>
            <td>Lemurs</td>
        </tr>
        <tr>
            <td>Tiger</td>
            <td>Grey Wolf</td>
            <td>Indri</td>
        </tr>
        <tr>
            <td>Cheetah</td>
            <td>Cape hunting dog</td>
            <td>Sifaka</td>
        </tr>
        <tr>
            <td>Caracal</td>
            <td>Red fox</td>
            <td>Brown lemur</td>
        </tr>
        <tr>
            <td>Wildcat</td>
            <td>Fennec</td>
            <td>Dwarf lemur</td>
        </tr>
    </table>

</body>
</html>
    PREVIEW
    머리글 셀(Header cells) : th 요소.
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Header cells</title>
    <style>
        table {
            margin-bottom: 2em;
        }

        td, th {
            border: 1px solid #999;
            padding: 0.1em 1em;
        }
    </style>
</head>
<body>

    <table>
        <tr>
            <th>Cats</th>
            <th>Dogs</th>
            <th>Lemurs</th>
        </tr>
        <tr>
            <td>Tiger</td>
            <td>Grey Wolf</td>
            <td>Indri</td>
        </tr>
        <tr>
            <td>Cheetah</td>
            <td>Cape hunting dog</td>
            <td>Sifaka</td>
        </tr>
        <tr>
            <td>Caracal</td>
            <td>Red fox</td>
            <td>Brown lemur</td>
        </tr>
        <tr>
            <td>Wildcat</td>
            <td>Fennec</td>
            <td>Dwarf lemur</td>
        </tr>
    </table>

    <table>
        <tr>
            <th>Cats</th>
            <td>Tiger</td>
            <td>Cheetah</td>
            <td>Caracal</td>
            <td>Wildcat</td>
        </tr>
        <tr>
            <th>Dogs</th>
            <td>Grey Wolf</td>
            <td>Cape hunting dog</td>
            <td>Red fox</td>
            <td>Fennec</td>
        </tr>
        <tr>
            <th>Lemurs</th>
            <td>Indri</td>
            <td>Sifaka</td>
            <td>Brown lemur</td>
            <td>Dwarf lemur</td>
        </tr>
    </table>

</body>
</html>
    PREVIEW
    셀 병합(Merging cells) 1 : rowspan 속성.
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Row spans</title>
    <style>
        td, th {
            border: 1px solid #999;
            padding: 0.1em 1em;
        }
    </style>
</head>
<body>

    <table>
        <tr>
            <th rowspan="2">Carnivores</th>
            <td>Tiger</td>
            <td>Cheetah</td>
            <td>Caracal</td>
            <td>Wildcat</td>
        </tr>
        <tr>
            <td>Grey Wolf</td>
            <td>Cape hunting dog</td>
            <td>Red fox</td>
            <td>Fennec</td>
        </tr>
        <tr>
            <th>Primates</th>
            <td>Indri</td>
            <td>Sifaka</td>
            <td>Brown lemur</td>
            <td>Dwarf lemur</td>
        </tr>
    </table>

</body>
</html>
    PREVIEW
    셀 병합(Merging cells) 2 : colspan 속성.
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Column spans</title>
    <style>
        td, th {
            border: 1px solid #999;
            padding: 0.1em 1em;
        }
    </style>
</head>
<body>

    <table>
        <tr>
            <th colspan="2">Carnivores</th>
            <th>Primates</th>
        </tr>
        <tr>
            <td>Tiger</td>
            <td>Grey Wolf</td>
            <td>Indri</td>
        </tr>
        <tr>
            <td>Cheetah</td>
            <td>Cape hunting dog</td>
            <td>Sifaka</td>
        </tr>
        <tr>
            <td>Caracal</td>
            <td>Red fox</td>
            <td>Brown lemur</td>
        </tr>
        <tr>
            <td>Wildcat</td>
            <td>Fennec</td>
            <td>Dwarf lemur</td>
        </tr>
    </table>

</body>
</html>
    PREVIEW
    테두리 축소(Border collapsing) 1 : 표 셀 테두리 축소.
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Border collapsing 1</title>
    <style>
        td, th {
            padding: 0.1em 1em;
            border: 1px solid #999;
        }

        #t2 {
            border-collapse: collapse;
        }
    </style>
</head>
<body>

    <h1>Border collapsing 1</h1>

    <h2><code>border-collapse: separate;</code> (default)</code></h2>
    <table>
        <tr>
            <th colspan="2">Carnivores</th>
            <th>Primates</th>
        </tr>
        <tr>
            <td>Tiger</td>
            <td>Grey Wolf</td>
            <td>Indri</td>
        </tr>
        <tr>
            <td>Cheetah</td>
            <td>Cape hunting dog</td>
            <td>Sifaka</td>
        </tr>
        <tr>
            <td>Caracal</td>
            <td>Red fox</td>
            <td>Brown lemur</td>
        </tr>
        <tr>
            <td>Wildcat</td>
            <td>Fennec</td>
            <td>Dwarf lemur</td>
        </tr>
    </table>

    <h2><code>border-collapse: collapse;</code></code></h2>
    <table id="t2">
        <tr>
            <th rowspan="2">Carnivores</th>
            <td>Tiger</td>
            <td>Cheetah</td>
            <td>Caracal</td>
            <td>Wildcat</td>
        </tr>
        <tr>
            <td>Grey Wolf</td>
            <td>Cape hunting dog</td>
            <td>Red fox</td>
            <td>Fennec</td>
        </tr>
        <tr>
            <th>Primates</th>
            <td>Indri</td>
            <td>Sifaka</td>
            <td>Brown lemur</td>
            <td>Dwarf lemur</td>
        </tr>
    </table>

</body>
</html>
    PREVIEW
    테두리 축소(Border collapsing) 2 : 표 셀 테두리 및 표 테두리 축소.
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Border collapsing 2</title>
    <style>
        table {
            border: 1px solid black;
        }

        td, th {
            padding: 0.1em 1em;
            border: 10px solid #ccc;
        }

        #t2 {
            border-collapse: collapse;
        }
    </style>
</head>
<body>

    <h1>Border collapsing 2</h1>

    <h2><code>border-collapse: separate;</code> (default)</code></h2>
    <table>
        <tr>
            <th colspan="2">Carnivores</th>
            <th>Primates</th>
        </tr>
        <tr>
            <td>Tiger</td>
            <td>Grey Wolf</td>
            <td>Indri</td>
        </tr>
        <tr>
            <td>Cheetah</td>
            <td>Cape hunting dog</td>
            <td>Sifaka</td>
        </tr>
        <tr>
            <td>Caracal</td>
            <td>Red fox</td>
            <td>Brown lemur</td>
        </tr>
        <tr>
            <td>Wildcat</td>
            <td>Fennec</td>
            <td>Dwarf lemur</td>
        </tr>
    </table>

    <h2><code>border-collapse: collapse;</code></code></h2>
    <table id="t2">
        <tr>
            <th rowspan="2">Carnivores</th>
            <td>Tiger</td>
            <td>Cheetah</td>
            <td>Caracal</td>
            <td>Wildcat</td>
        </tr>
        <tr>
            <td>Grey Wolf</td>
            <td>Cape hunting dog</td>
            <td>Red fox</td>
            <td>Fennec</td>
        </tr>
        <tr>
            <th>Primates</th>
            <td>Indri</td>
            <td>Sifaka</td>
            <td>Brown lemur</td>
            <td>Dwarf lemur</td>
        </tr>
    </table>

</body>
</html>
    PREVIEW
    열 그룹(Column groups) : col 및 colgroup 요소
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Column groups</title>
    <style>
        body {
            font: 80%/1.5 arial, helvetica, sans-serif;
        }
    
        table {
            border: 1px solid #668;
            border-collapse: collapse;
            caption-side: bottom;
        }
    
        td {
            padding: 0.1em 2em;
            border-spacing: 1em;
        }

    
        col.alternative {
            background: #ddf;
        }
    </style>
</head>
<body>

    <table>
        <caption>Caption</caption>
        <colgroup>
            <col>
            <col class="alternative">
            <col>
            <col class="alternative">
            <col>
        </colgroup>
        <tr>
            <td>This</td>
            <td>That</td>
            <td>The other</td>
            <td>Lunch</td>
            <td>Lunch</td>
        </tr>
        <tr>
            <td>Ladybird</td>
            <td>Locust</td>
            <td>Lunch</td>
            <td>Lunch</td>
            <td>Lunch</td>
        </tr>
        <tr>
            <td>Ladybird</td>
            <td>Locust</td>
            <td>Lunch</td>
            <td>Lunch</td>
            <td>Lunch</td>
        </tr>
        <tr>
            <td>Ladybird</td>
            <td>Locust</td>
            <td>Lunch</td>
            <td>Lunch</td>
            <td>Lunch</td>
        </tr>
        <tr>
            <td>Ladybird</td>
            <td>Locust</td>
            <td>Lunch</td>
            <td>Lunch</td>
            <td>Lunch</td>
        </tr>
    </table>

</body>
</html>
    PREVIEW
    빈 셀(Empty cells) : 빈 셀(empty-cells) 속성을 사용하여 빈 셀을 표시하는 방법을 지정합니다.
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Empty cells</title>
    <style>
        table {
            width: 100%;
        }

        td, th {
            border: 1px solid #999;
            padding: 0.1em 1em;
            empty-cells: hide;
        }

        .alternative {
            background-color: #ddf;
        }
    </style>
</head>
<body>

    <table>
        <caption>Animal groups</caption>
        <colgroup>
            <col span="3">
            <col class="alternative">
            <col>
        </colgroup>
        <tr>
            <th>Apes</th>
            <th colspan="2">Cats</th>
            <th style="background: #ddf;">Dogs</th>
            <th>Lemurs</th>
        </tr>
        <tr>
            <td>Gorilla</td>
            <td></td>
            <td>Cheetah</td>
            <td style="background: #ddf;">Grey Wolf</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>Lion</td>
            <td>Puma</td>
            <td style="background: #ddf;"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td>Serval</td>
            <td style="background: #ddf;"></td>
            <td>Red ruffed lemur</td>
        </tr>
        <tr>
            <td>Chimpanzee</td>
            <td>Leopard</td>
            <td>Caracal</td>
            <td style="background: #ddf;">Red Fox</td>
            <td>Ring tailed lemur</td>
        </tr>
        <tr>
            <td>Bonobo</td>
            <td> </td><!-- a non-breaking space makes this not an empty cell -->
            <td>Wild cat</td>
            <td style="background: #ddf;"> </td>
            <td> </td>
        </tr>
    </table>

</body>
</html>
    PREVIEW
    자동 테이블 레이아웃(Automatic table layout) : 테이블이 사용하는 기본 레이아웃 알고리즘.
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Automatic table layout</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        td, th {
            border: 1px solid #999;
            padding: 0.1em 1em;
        }

        .alternative {
            background-color: #ddf;
        }
    </style>
</head>
<body>

    <table>
        <caption>Animal groups</caption>
        <colgroup>
            <col span="3">
            <col class="alternative">
            <col>
        </colgroup>
        <tr>
            <th>Apes</th>
            <th colspan="2">Cats</th>
            <th style="background: #ddf;">Dogs</th>
            <th>Lemurs</th>
        </tr>
        <tr>
            <td>Gorilla</td>
            <td>Tiger</td>
            <td>Cheetah</td>
            <td style="background: #ddf;">Grey Wolf</td>
            <td>Indri</td>
        </tr>
        <tr>
            <td>Orangutan</td>
            <td>Lion</td>
            <td>Puma</td>
            <td style="background: #ddf;">Cape hunting dog</td>
            <td>Sifaka</td>
        </tr>
        <tr>
            <td>Man</td>
            <td>Jaguar</td>
            <td>Serval</td>
            <td style="background: #ddf;">Very silly big long-long named dog woof</td>
            <td>Red ruffed lemur</td>
        </tr>
        <tr>
            <td>Chimpanzee</td>
            <td>Leopard</td>
            <td>Caracal</td>
            <td style="background: #ddf;">Red Fox</td>
            <td>Ring tailed lemur</td>
        </tr>
        <tr>
            <td>Bonobo</td>
            <td>Snow leopard</td>
            <td>Wild cat</td>
            <td style="background: #ddf;">Fennec</td>
            <td>Dwarf lemur</td>
        </tr>
    </table>

</body>
</html>
    PREVIEW
    고정 테이블 레이아웃(Fixed table layout) : table-layout 속성을 사용하여 설정합니다.
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Fixed table layout</title>
    <style>
        table {
            border-collapse: collapse;
            table-layout: fixed;
            width: 100%;
        }

        td, th {
            border: 1px solid #999;
            padding: 0.1em 1em;
        }

        .alternative {
            background-color: #ddf;
        }
    </style>
</head>
<body>

    <table>
        <caption>Animal groups</caption>
        <colgroup>
            <col span="3">
            <col class="alternative">
            <col>
        </colgroup>
        <tr>
            <th>Apes</th>
            <th colspan="2">Cats</th>
            <th style="background: #ddf;">Dogs</th>
            <th>Lemurs</th>
        </tr>
        <tr>
            <td>Gorilla</td>
            <td>Tiger</td>
            <td>Cheetah</td>
            <td style="background: #ddf;">Grey Wolf</td>
            <td>Indri</td>
        </tr>
        <tr>
            <td>Orangutan</td>
            <td>Lion</td>
            <td>Puma</td>
            <td style="background: #ddf;">Cape hunting dog</td>
            <td>Sifaka</td>
        </tr>
        <tr>
            <td>Man</td>
            <td>Jaguar</td>
            <td>Serval</td>
            <td style="background: #ddf;">Very silly big long-long named dog woof</td>
            <td>Red ruffed lemur</td>
        </tr>
        <tr>
            <td>Chimpanzee</td>
            <td>Leopard</td>
            <td>Caracal</td>
            <td style="background: #ddf;">Red Fox</td>
            <td>Ring tailed lemur</td>
        </tr>
        <tr>
            <td>Bonobo</td>
            <td>Snow leopard</td>
            <td>Wild cat</td>
            <td style="background: #ddf;">Fennec</td>
            <td>Dwarf lemur</td>
        </tr>
    </table>

</body>
</html>
    PREVIEW