Belajar HTML (08): Membuat Tabel

Ketik kode berikut, simpan dengan nama file 15-html-table-border-align.html:

<!DOCTYPE html>
<html>
<head>
   <title>Tabel Border & Align</title>
</head>
<body>
   <p>Contoh <b>Table</b> dengan pengaturan border, lebar maksimal 500 pixel, tabel rata ditengah layar, perataan baris berbeda-beda</p>
   
   <table border="1" align="center" width="500">
      <tr align="right">
       <td width="33%">baris 1 kolom 1</td>
       <td width="33%">baris 1 kolom 2</td>
       <td width="33%">baris 1 kolom 3</td>
    </tr>
    <tr align="left">
       <td>baris 2 kolom 1</td>
       <td>baris 2 kolom 2</td>
       <td>baris 2 kolom 3</td>
    </tr>
    <tr align="center">
       <td>baris 3 kolom 1</td>
       <td>baris 3 kolom 2</td>
       <td>baris 3 kolom 3</td>
    </tr>
   </table>
   
</body>
</html>

Coba jalankan dan lihat hasilnya, kira-kira akan seperti gambar berikut.

Table Border & Align

table heading

Biasanya pada tabel ada bagian atas atau sebutannya header tabel atau bisa juga disebut heading yang digunakan sebagai judul tabel. Heading biasanya memiliki format atau bentuk yang berbeda dengan baris-baris selanjutnya. Untuk membuat heading ini cukup dengan mengganti tag <td></td> menjadi tag <th></th>.

Langsung saja, silahkan gunakan file sebelumnya, sesuaikan sedikit seperti kode berikut kemudian simpan dengan nama file 16-html-table-heading.html:

<!DOCTYPE html>
<html>
<head>
   <title>Tabel Heading</title>
</head>
<body>
   <p>Contoh <b>Table</b> dengan pengaturan heading</p>
   
   <table border="1" align="center" width="500">
      <tr>
       <th>judul kolom 1</th>
       <th>judul kolom 2</th>
       <th>judul kolom 3</th>
    </tr>
      <tr align="right">
       <td>baris 1 kolom 1</td>
       <td>baris 1 kolom 2</td>
       <td>baris 1 kolom 3</td>
    </tr>
    <tr align="left">
       <td>baris 2 kolom 1</td>
       <td>baris 2 kolom 2</td>
       <td>baris 2 kolom 3</td>
    </tr>
    <tr align="center">
       <td>baris 3 kolom 1</td>
       <td>baris 3 kolom 2</td>
       <td>baris 3 kolom 3</td>
    </tr>
   </table>
   
</body>
</html>

Jalankan file tersebut dan lihat hasilnya.

Table Heading

Pada tampilan hasil, terlihat bahwa heading akan terbentuk baris yang ditampilkan secara berbeda dibandingkan dengan baris-baris lainnya. Dengan heading, maka tulisan akan menjadi tebal dan rata di tengah tanpa perlu diatur ketebalan dan perataannya secara manual.

← Sebelumnya Selanjutnya →

Halaman : 1 2 3 4

Share

Muhammad Erfan

aslinya karyawan, suka belajar pemrograman, senang berbagi ilmu melalui tulisan, lagi usaha menghasilkan uang online :cool:

You may also like...

3 Responses

  1. 18 Februari 2017

    […] Setelah sebelumnya kita membuat tabel, selanjutnya kita bahas tentang bagaimana membuat link atau tautan dalam halaman […]

  2. 29 Juli 2017

    […] Contoh kedua ini gabungan semua jenis list dan juga bahasan-bahasan sebelumnya tentang membuat tabel dan menentukan font. Silahkan dicoba dan […]

  3. 22 Januari 2019

    […] yang berbau jQuery Mobile. Tetapi ada hubungannya dengan tulisan tentang HTML, yaitu cara untuk membuat tabel. Ya kita akan bahas bagaimana membuat tabel di jQuery Mobile dan memilih kolom apa saja yang akan […]

Tinggalkan Balasan

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