Cara Membuat Tabel dengan HTML dan CSS

Assalamu'alaikum wr wb - Banyak cara yang bisa kita lakukan untuk membuat tabel dengan html dan css, contohnya adalah menggunakan tools online yang bayak tersebar di internet, atau dengan menggunakan word yang disimpan dengan jenis HTML, dan cara-cara lainnya. Namun bagi yang ingin mengetahui bagaimana cara membuatnya secara langsung, berikut akan kita bahas..

Membuat Tabel dengan HTML dan CSS

Di bawah ini adalah tabel yang menggunakan HTML saja.

Source code:

<table>
<tr>
    <th>Judul 1</th>
    <th>Judul 2</th><th>Judul 3</th></tr>
<tr><td>Baris 2 kolom 1</td>
    <td>Baris 2 kolom 2</td><td>Baris 2 kolom 3</td>
  </tr>
<tr>
    <td>Baris 3 kolom 1</td>
    <td>Baris 3 kolom 2</td>
    <td>Baris 3 kolom 3</td>
  </tr>
</table>

Dan di bawah ini adalah tabel di atas yang telah memakai sedikit CSS.

Source code:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

Dengan CSS, tabel akan menjadi lebih indah, seperti pada contoh dibawah ini

Source code:

table  {border-collapse:collapse;border-spacing:0;border-color:#999;}
table td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#999;color:#444;background-color:#F7FDFA;}
table th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#999;color:#fff;background-color:#26ADE4;}

Nah sekarang kita mulai untuk mengetahui bagaimana cara membuat tabel dengan menggunakan HTML terlebih dahulu.

Kerangka tabel pada HTML biasanya seperti ini

<table> <!--memulai tabel-->
<tr> <!--membuat baris ke-1 -->
    <th>Judul 1</th> <!--judul kolom 1 baris 1-->
    <th>Judul 2</th> <!--judul kolom 2 baris 1-->
    <th>Judul 3</th> <!--judul kolom 3 baris 1-->
</tr> <!--mengakhiri baris ke-1-->
<tr> <!--membuat baris ke-2 -->
    <td>Baris 2 kolom 1</td> <!--kolom 1 baris 2-->
    <td>Baris 2 kolom 2</td> <!--kolom 2 baris 2-->
    <td>Baris 2 kolom 3</td> <!--kolom 3 baris 2-->
</tr> <!--mengakhiri baris ke-2-->
<tr> <!--membuat baris ke-3 -->
    <td>Baris 3 kolom 1</td> <!--kolom 1 baris 3-->
    <td>Baris 3 kolom 2</td> <!--kolom 2 baris 3-->
    <td>Baris 3 kolom 3</td> <!--kolom 3 baris 3-->
  </tr> <!--mengakhiri baris ke-3-->
</table> <!--mengakhiri tabel-->

Suatu tabel di HTML diawali dengan tag <table> dan diakhiri oleh tag </table>

Tag <tr> digunakan untuk membuat baris, tag <th> biasanya digunakan untuk judul setiap kolom / baris pada tabel HTML, biasanya teks pada tag <th> akan berada di tengah dan bolt, dan tag <td> digunakan untuk membuat cell / data di suatu baris.

Data di dalam tag <td> dapat berupa teks, gambar, list, tabel lainnya, dll.

Teman-teman yang menggunakan browser desktop bisa melakukan praktik secara langsung untuk membuat tabel dengan HTML dan CSS, caranya dengan mengklik demo berikut:

DEMO

Menambahkan border

Tabel yang telah dibuat masih belum ada bordernya, maka dari itu kita tambahkan bordernya dengan kode di bawah ini:

table, th, td {
    border: <ukuran> <jenis> <warna>;
}

Ukuran border dapat diisi dengan ukuran px.

Jenis border dapat diisi dengan dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden,

Warna border dapat berupa nama warna dalam bahasa inggris atau kode RGB hex.

Contoh penerapannya seperti kode di bawah ini:

table, th, td {
    border: 1px solid black;
}

Menyatukan border

Tabel telah diberi border, namun bordernya belum menyatu, maka dari itu kita satukan border tersebut dengan menggunakan kode di bawah ini:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

Menambahkan padding

Padding adalah jarak antara konten dengan border pada cell. Berikut kodenya:

th, td {
    padding: 15px;
}

15px adalah ukuran jaraknya.

Untuk menambahkan padding yang berbeda pada setiap sisi, bisa dengan menggunakan kode berikut:

th, td {
    padding: <atas> <kanan> <bawah> <kiri>;
}

Contoh penerapannya:

th, td {
    padding: 5px 0px 20px 70px;
}

Mengatur rata teks

Untuk mengatur rata teks yang ada di tabel, dapat menggunakan kode dibawah ini:

<tag> {
    text-align: <align>;
}

Tag diganti dengan bagian tabel yang ingin diubah rata teksnya.

Align diisi dengan jenis rata teksnya, ini bisa berisi center, left, right, justify.

Contoh penerapan pada tag <th>

th {
    text-align: right;
}

Mengatur spasi border

Kode ini tidak bisa digunakan pada tabel yang telah menggunakan border-collapse: collapse;

Untuk mengatur spasi / jarak border, dapat menggunakan kode di bawah ini:

table {
    border-spacing: 5px;
}

5px adalah ukuran spasinya.

Menyatukan beberapa kolom

Untuk menyatukan beberapa kolom di tabel HTML, dapat menggunakan kode berikut:

<table>
  <tr>
    <th>Nama</th>
    <th colspan="2">Telepon</th>
  </tr>
  <tr>
    <td>Kangghani</td>
    <td>123-456-789</td>
    <td>987-654-321</td>
  </tr>
</table>

colspan="2" berarti 1 tag <th> tersebut menggabungkan 2 kolom.

Menyatukan beberapa baris

Untuk menyatukan beberapa baris di tabel HTML, dapat menggunakan kode berikut:

<table>
  <tr>
    <th>Nama:</th>
    <td>Kangghani</td>
  </tr>
  <tr>
    <th rowspan="2">Telepon:</th>
    <td>123-456-789</td>
  </tr>
  <tr>
    <td>987-654-321</td>
  </tr>
</table>

rowspan="2" berarti 1 tag <th> menggabungkan 2 baris.

Menambahkan caption

Caption digunakan untuk menambahkan keterangan dari suatu tabel. Untuk menambahkan caption dapat menggunakan kode berikut ini:

<table>
<caption>Daftar Nama</caption>
  <tr>
    <th>Nama</th>
    <th>Kelas</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Ujang</td>
    <td>S1TTB</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Eneng</td>
    <td>S1IFB</td>
    <td>19</td>
  </tr>
</table>

Untuk menambahkan caption dapat dengan menambahkan tag <caption>keterangannya</caption> yang di masukkan setelah tag <table>.

Menambahkan style css spesifik

Untuk menambahkan style css spesifik pada salah satu bagian pada tabel, kita bisa dengan menambahkan class atau id pada bagian tersebut. Contohnya seperti ini:

Kodenya:

<table width="300px">
<caption>Daftar Nama</caption>
  <tr>
    <th>Nama</th>
    <th>Kelas</th> 
  </tr>
  <tr>
    <td>Ujang</td>
    <td>S1TTB</td>
  </tr>
  <tr>
    <td class="beda">Eneng</td>
    <td>S1IFB</td>
  </tr>
</table>

#berbeda{
    background-color:green;
}
.beda{
    background-color: red;
}

Untuk menerapkan css di suatu id, bubuhkan tanda pagar ( # ) di depan nama id nya.

Untuk menerapkan css di suatu class, bubuhkan tanda titik ( . )di depan nama id nya.

Penutup

Sebenarnya masih banyak lagi yang dapat ditambahkan pada suatu tabel, tapi karena postingan ini sudah agak panjang saya akhiri saja.

Untuk HTML bisa dengan menggunakan kode di atas sebagai dasarnya, dan untuk CSS di atas hanya sebagai dasarnya saja, maka dari itu masih banyak yang harus dipelajari tentang CSS ini. Saya sarankan untuk belajar dari beberapa sumber yang berbeda.

Atau bagi teman-teman yang bingung, teman-teman dapat menanyakannya di kolom komentar.

Sekian dari saya tentang membuat tabel dengan html dan css, terimakasih telah mengunjungi blog saya, dan semoga bermanfaat.

Wassalamu'alaikum wr wb.