dasar html (9) : membuat tabel

    Tabel terdiri dari baris dan kolom, pada dokumen HTML tabel di tentukan oleh tag <table> dan untuk membuat barisnya dengan tag <tr>, serta kolom nya di tentukan oleh tag <td> kependekan dari table data, pada tag td ini yang nantinya dapat di isi dengan teks, link, gambar, dan lainnya, bahkan dapat berisi tabel lain.

    <html>
    <body>
    <table border="1">
    <tr>
    <td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
    </tr>
    <tr>
    <td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
    </tr>
    <tr>
    <td>Baris 3, kolom 1</td><td>Baris 3, kolom 2</td>
    </tr>
    </table>
    </body>
    </html>

    Script tersebut akan menhasilkan tabel seperti dibawah ini.

    Baris 1, kolom 1 Baris 1, kolom 2
    Baris 2, kolom 1 Baris 2, kolom 2
    Baris 3, kolom 1 Baris 3, kolom 2

    Atribut Pada Tabel, Border

    Border atau garis pembatas adalah atribut untuk membuat garis pada tabel HTML, tanpa atribut ini tabel pada HTML tidak akan memiliki garis-garis pembatas

    <html>
    <body>
    <h4>Tabel tanpa atribut border</h4>
    <table>
    <tr>
    <td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
    </tr>
    <tr>
    <td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
    </tr>
    </table>
    
    <h4>Tabel dengan nilai border 1</h4>
    <table border="1">
    <tr>
    <td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
    </tr>
    <tr>
    <td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
    </tr>
    </table>
    
    <h4>Tabel dengan nilai border 5</h4>
    <table border="5">
    <tr>
    <td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
    </tr>
    <tr>
    <td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
    </tr>
    </table>
    </body>
    </html>

    Script tersebut akan menhasilkan tabel seperti dibawah ini.

    Tabel tanpa atribut border

    Baris 1, kolom 1 Baris 1, kolom 2
    Baris 2, kolom 1 Baris 2, kolom 2

    Tabel dengan nilai border 1

    Baris 1, kolom 1 Baris 1, kolom 2
    Baris 2, kolom 1 Baris 2, kolom 2

    Tabel dengan nilai border 5

    Baris 1, kolom 1 Baris 1, kolom 2
    Baris 2, kolom 1 Baris 2, kolom 2

     

    Mengatur Jarak Antar Sel

    Jarak antara sel pada tabel HTML diatur oleh atribut cellspacing

    <html>
    <body>
    <h4>Tabel tanpa atribut cellspacing</h4>
    <table border="1">
    <tr>
    <td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
    </tr>
    <tr>
    <td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
    </tr>
    </table>
    
    <h4>Tabel dengan nilai atribut cellspacing="0"</h4>
    <table border="1" cellspacing="0">
    <tr>
    <td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
    </tr>
    <tr>
    <td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
    </tr>
    </table>
    
    <h4>Tabel dengan nilai atribut cellspacing="10"</h4>
    <table border="1" cellspacing="10">
    <tr>
    <td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
    </tr>
    <tr>
    <td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
    </tr>
    </table>
    </body>
    </html>

    Script tersebut akan menghaislkan:

    Tabel tanpa atribut cellspacing

    Baris 1, kolom 1 Baris 1, kolom 2
    Baris 2, kolom 1 Baris 2, kolom 2

    Tabel dengan nilai atribut cellspacing=”0″

    Baris 1, kolom 1 Baris 1, kolom 2
    Baris 2, kolom 1 Baris 2, kolom 2

    Tabel dengan nilai atribut cellspacing=”10″

    Baris 1, kolom 1 Baris 1, kolom 2
    Baris 2, kolom 1 Baris 2, kolom 2

    Mengatur Jarak Antara konten dengan garis sel

    mengatur jarak antara konten pada sel dengan batas pinggir cel tersebut dapat dilakukan dengan menambahkan atribut cellpadding

    <html>
    <body>
    
    <h4>Tabel tanpa atribut cellpadding</h4>
    <table border="1">
    <tr>
    <td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
    </tr>
    <tr>
    <td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
    </tr>
    </table>
    
    <h4>Tabel dengan nilai atribut cellpadding="10"</h4>
    <table border="1" cellpadding="10">
    <tr>
    <td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
    </tr>
    <tr>
    <td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
    </tr>
    </table>
    
    </body>
    </html>

    Script tersebut akan menhasilkan:

    Tabel tanpa atribut cellpadding

    Baris 1, kolom 1 Baris 1, kolom 2
    Baris 2, kolom 1 Baris 2, kolom 2

    Tabel dengan nilai atribut cellpadding=”10″

    Baris 1, kolom 1 Baris 1, kolom 2
    Baris 2, kolom 1 Baris 2, kolom 2

    RowSpan dan COlspan

    Untuk membuat sel pada tabel yang menjangkau lebih dari satu baris atau kolom yaitu dengan memakai atribut colspans dan rowspan. Dari pada bingung lihat dan praktekan contoh dibawah

    <html>
    <body>
    
    <h4>Sel yang menjangkau 2 kolom</h4>
    <table border="1">
    <tr>
    <th>Nama</th><th colspan="2">Telepon</th>
    </tr>
    <tr>
    <td>Heri</td><td>123456</td><td>456789</td>
    </tr>
    </table>
    
    <h4>Header vertikal</h4>
    <table border="1">
    <tr>
    <th>Nama : </td><td>Heri</td>
    </tr>
    <tr>
    <th rowspan="2">Telepon : </th></td><td>123456</td>
    </tr>
    <tr>
    </td><td>456789</td>
    </tr>
    </table>
    
    </body>
    </html>

    Script Tersebut akan menghasilkan:

    Sel yang menjangkau 2 kolom

    Nama Telepon
    Heri 123456 456789

    Header vertikal

    Nama : Heri
    Telepon : 123456
    456789

      Tinggalkan Balasan

      Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *