Cara Membuat Tabel HTML - Tutorial HTML Dasar

Tabel HTML

Tabel HTML digunakanuntuk mengatur data seperti, teks, gambar, tautan, formulir, bidang formulir, tabel lainnya, dll. Ke dalam baris dan kolom sel.

Membuat Tabel HTML

Tabel dalam HTML didefinisikan dengan tag <Table>. Sebuah tabel tersusub dari baris dengan tag <tr>, yang merupakan singkatan dari  tabel row, dan setiap baris dibagi menjadi sel data dengan tag, <td>. Sebuah tag <td> dapat berisi teks, link, gambar, daftar, bentuk, tabel lain, dll.
berikut contoh penulisan Tabel dalam HTML.

<table  border = "1" >
    <thead>
        <tr>
            <th> No. </ th>
            <th> Nama </ th>
            <th> Email </ th>
        </ tr>
    <tr>
            <td> 1 </ td>
            <td> John Carter </ td>
            <td> johncarter@mail.com </ td>
        </ tr>
    </ thead>

Penggunaan Cellpadding dan Cellspacing Tabel

Pada Tabel, cellpading dan cellspacing merupakan atribut yang digunakan untuk mengatur ruang di dalam tabel .cellpadding menyesuaikan ruang di antara batas sel tabel dan isinya. sedangkan cellspacing mengatur ruang di antara sel-sel tabel.

Berikut contoh penulisan cellpadding dan cellspacing Tabel

<table  border = "1"  cellpadding = "10"  cellspacing = "5" >
    <thead>
        <tr>
            <th> No. </ th>
            <th> Nama </ th>
            <th> Email </ th>
        </ tr>
    </ thead>
        <tr>
            <td> 1 </ td>
            <td> John Carter </ td>
            <td> johncarter@mail.com </ td>
        </ tr>
        <tr>
            <td> 2 </ td>
            <td> Peter Parker </ td>
            <td> peterparker@mail.com </ td>
        </ tr>
</ table>

Spanning Kolom dan Baris Tabel

Spanning digunakan untuk memperluas kolom dan baris di beberapa kolom dan baris lainnya. untuk mempeluas beberapa kolom  dapat menggunakan atribut colspan, sedangkan untuk menjangkau beberapa baris dapat menggunakan atribut rowspan.

berikut contoh penulisan Rowspan dan Colspan pada Tabel.

<table  border = "1" >
    <tr>
        <th  rowspan = "4" > Info Pengguna </ th>
    </ tr>
    <tr>
        <td> 1 </ td>
        <td> John Carter </ td>
        <td> johncarter@mail.com </ td>
    </ tr>
    <tr>
        <td> 2 </ td>
        <td> Peter Parker </ td>
        <td> peterparker@mail.com </ td>
    </ tr>

</ table>

untuk pemahaman lebih lanjut perhatikan live previw berikut ini.

Code:

<h1> Tabel Normal </h1> <table border = "1" > <thead> <tr> <th> No. </th> <th> Nama </th> <th> Email </ th> </tr> </thead> <tr> <td> 1 </ td> <td> John Carter </ td> <td> johncarter@mail.com </ td> </tr> <tr> <td> 2 </ td> <td> Peter Parker </ td> <td> peterparker@mail.com </ td> </tr> </table> <h1> Tabel Cellpadding dan Cellspacing</h1> <table border = "1" cellpadding = "10" cellspacing = "5" > <thead> <tr> <th> No. </th> <th> Nama </th> <th> Email </th> </ tr> </thead> <i> <tr> <td> 1 </td> <td> John Carter </td> <td> johncarter@mail.com </td> </tr> <tr> <td> 2 </td> <td> Peter Parker </td> <td> peterparker@mail.com </td> </tr> </table> <h1> Tabel Rowspan dan Colspan</h1> <table border = "1" > <tr> <th rowspan = "4" > Info Pengguna </th> </tr> <tr> <td> 1 </td> <td> John Carter </td> <td> johncarter@mail.com </td> </ tr> <tr> <td> 2 </td> <td> Peter Parker </ td> <td> peterparker@mail.com </td> </tr> </table>

m

Result:

Share this post