Tutorial Dasar Website-Membuat Tabel

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Juli 19, 2024
2
Tutorial Dasar Website-Membuat Table

Membuat Table

Hi Web Developer! kali ini guru design akan berbagi tutorial cara membuat table di website. Pada tutorial sebelumnya kita telah mempelajari Tutorial Dasar Website-List Item dan pada kesempatan kali ini kita kan melanjutkan materi selanjutnya yaitu membuat tabel. Baiklah langsung ketutorialnya Jadi pembuatan tabel di website sangatlah mudah tinggal kita gunakan tag dibawah ini

<table border="1">
    <tr>
        <th>Judul 1</th> 
        <th>Judul 2</th>
        <th>Judul 3</th> 
    </tr>
    <tr>
        <td>Isi 1 baris 1</td> 
        <td>Isi 2 baris 1</td>
        <td>Isi 3 baris 1</td> 
    </tr>
    <tr>
        <td>Isi 1 baris 2</td> 
        <td>Isi 2 baris 2</td>
        <td>Isi 3 baris 2</td> 
    </tr>
</table>

 

Begini Penerapannya

 

HTML 
<html>
    <head>
        <title> Judul mu tulis disini </title>
    </head> 
        <body>            
            <table>
                <tr>
                    <th>Judul 1</th> 
                    <th>Judul 2</th>
                    <th>Judul 3</th> 
                </tr>
                <tr>
                    <td>Isi 1 baris 1</td> 
                    <td>Isi 2 baris 1</td>
                    <td>Isi 3 baris 1</td> 
               </tr>
               <tr>
                    <td>Isi 1 baris 2</td> 
                    <td>Isi 2 baris 2</td>
                    <td>Isi 3 baris 2</td> 
                </tr>
            </table>
        </body>
</html>

CSS

<style type="text/css">
th {font-weight:bold;
    padding:0.6em;
    text-transform:uppercase;
    background:#747d8c;
    color:#fff;
    border:0;
    padding:10px 15px;
    text-align:left;
    vertical-align:top;
    font-size:15px;
    vertical-align:top;
    text-align:left;
    font-size:13px;
    padding:3px 5px;
    border:0;
    }

td {padding:0.6em;
    border:0;
    padding:0;
    background:#fff;
    line-height:17px;
    overflow:hidden;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight:700;
    color:#57606f;
    background-color:#f6f8f9;
    }
    table tr:nth-of-type(odd) td{background-color:#ecf0f1;
    }
table {width:100%;
    max-width:100%;
    border-radius:3px;
    overflow:hidden;
}
table td,table caption{border:0;
    padding:10px 15px;
    text-align:left;
    vertical-align:top;
    color:#57606f;
    font-size:.9rem;
}
</style>

 

Begini Demonya

 

Judul 1 Judul 2 Judul 3
Isi 1 baris 1 Isi 2 baris 1 Isi 3 baris 1
Isi 1 baris 2 Isi 2 baris 2 Isi 3 baris 2

NEXT Tutorial Dasar Website-Menampilkan Gambar dan video youtube (Ready)
Sekian tutorialnya trimakasih semoga bermanfaat.

Rafiqi, S.Kom.