Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Membuat Tabel HTML Menggunakan Tag Table

Dipublikasikan Oleh: elfanmauludi 30 komentar
Tabel merupakan bentuk pengaturan data yang tersusun dari baris dan kolom, ataupun juga bentuk lain yang lebih komplek, dimana pada materi kali ini akan dipelajari cara tentang Membuat tabel HTML.

Sebelum memahami lebih dalam materi tentang Membuat Tabel HTML Menggunakan Tag Table, terlebih dahulu pelajari materi tentang: Membuat Rumus Pangkat Matematika pada HTML, Memodifikasi Tampilan HTML Menggunakan Tag Style, dan Menebalkan Teks HTML Menggunakan Tag Strong.

Tabel secara umum digunakan dalam dunia komunikasi, research, dan analisis data.
  1. Tabel digunakan untuk berbagai penugasan sebagai alat presentasi informasi teks dan data numerik.
  2. Tabel digunakan untuk membandingkan dua atau lebih item pada form tabulasi.
  3. Tabel juga digunakan untuk membuat database.

Definisi Tabel Pada HTML

Tabel HTML didefinisikan menggunakan tag table, dimana setiap baris tabel didefiniskan dengan tag TR dan kolom didefinisikan dengan tag TD. Bagian header pada tag table didefinisikan dengan tag TH. Secara default, heading tabel memiliki format bold dan rata tengah.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<table style="width:100%">

 

<tr>

<th>Nama Pertama</th>

<th>Nama Terakhir</th>

<th>Usia</th>

</tr>

 

<tr>

<td>Rahul</td>

<td>Sharma</td>

<td>24</td>

</tr>

 

<tr>

<td>Arun</td>

<td>Singh</td>

<td>32</td>

</tr>

 

<tr>

<td>Sam</td>

<td>Watson</td>

<td>41</td>

</tr>

 

</table>

 

</body>

 

</html>



Option penting pada tabel HTML:
satu, Penambahan Border pada Tabel: border diatur menggunakan properti CSS border. Jika tidak dilakukan penentuan border tabel, maka akan menampilkan tabel tanpa adanya border pada layar monitor.

Sintak: border: 1px solid black;

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

table, th, td 

{

border: 1px solid black;

}

</style>

</head>

 

<body>

 

<table style="width:100%">

 

<tr>

<th>Nama Awalan</th>

<th>Nama Akhir</th>

<th>Age</th>

</tr>

 

<tr>

<td>Priya</td>

<td>Bambang</td>

<td>24</td>

</tr>

 

<tr>

<td>Arun</td>

<td>Singh</td>

<td>32</td>

</tr>

 

<tr>

<td>Sam</td>

<td>Watson</td>

<td>41</td>

</tr>

 

</table>

 

</body>

 

</html>


dua, Penambahan Collapsed Border pada Tabel HTML: border collapsed pada html dapat ditambahkan dengan properti border-collapsed CSS.

Sintak: border-collapse: collapse;

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

table, th, td 

{

border: 1px solid black;

border-collapse: collapse;

}

</style>

</head>

 

<body>

 

<table style="width:100%">

 

<tr>

<th>Nama Awalan</th>

<th>Nama Akhiran</th>

<th>Age</th>

</tr>

 

<tr>

<td>Priya</td>

<td>Sharma</td>

<td>24</td>

</tr>

 

<tr>

<td>Jumanji</td>

<td>Singh</td>

<td>32</td>

</tr>

 

<tr>

<td>Sam</td>

<td>Watson</td>

<td>41</td>

</tr>

 

</table>

 

</body>

 

</html>


tiga, Penambahan Cell Padding pada Tabel HTML: cell padding menentukan ruang antara cell konten dan bordernya. Jika tidak cell pandding tidak ditentukan pada tabel, maka akan ditampilkan tabel tanpa disertai cellpadding pada dokumen html.

Sintak: padding: 20px;

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<style>

table, th, td 

{

border: 1px solid black;

border-collapse: collapse;}

 

th, td 

{

padding: 20px;}

</style>

 

</head>

 

<body>

 

<table style="width:100%">

 

<tr>

<th>Nama Awalan</th>

<th>Nama Akhiran</th>

<th>Usia</th>

</tr>

 

<tr>

<td>Sumanto</td>

<td>Sharma</td>

<td>24</td>

</tr>

 

<tr>

<td>Arun</td>

<td>Singh</td>

<td>32</td>

</tr>

 

<tr>

<td>Sam</td>

<td>Watson</td>

<td>41</td>

</tr>

 

</table>

 

</body>

 

</html>


empat, Penambahan Heading Left Align pada Tabel HTML: secara default, heading tabel adalah bold dan rata tengah. Untuk mengubah arah perataan menjadi kiri maka digunakan properti CSS left-align.

Sintak: text-align: left;

Contoh:

<html>

 

<head>

 

<style>

table, th, td 

{

border: 1px solid black;

border-collapse: collapse;}

 

th, td 

{

padding: 20px;}

 

th 

{

text-align: left;}

</style>

 

</head>

 

<body>

 

<table style="width:100%">

 

<tr>

<th>Nama Awalan</th>

<th>Nama Akhiran</th>

<th>Usia</th>

</tr>

 

<tr>

<td>Shinta</td>

<td>Shanks</td>

<td>24</td>

</tr>

 

<tr>

<td>Arun</td>

<td>Singh</td>

<td>32</td>

</tr>

 

<tr>

<td>Sam</td>

<td>Watson</td>

<td>41</td>

</tr>

 

</table>

 

</body>

 

</html>


lima, Penambahan Spasi Border pada Tabel HTML: border spacing menentukan ruang antar cell pada tabel html. Untuk mengatur ruang spasi atau border spacing pada tabel, maka digunakan properti border-spacing CSS.

Sintak: border-spacing: 5px;

Contoh:

<html>

 

<head>

 

<style>

table, th, td 

{

border: 1px solid black;}

 

table 

{

border-spacing: 5px;}

</style>

 

</head>

 

<body>

 

<table style="width:100%">

 

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

 

<tr>

<td>Priya</td>

<td>Sharma</td>

<td>24</td>

</tr>

 

<tr>

<td>Arun</td>

<td>Singh</td>

<td>32</td>

</tr>

 

<tr>

<td>Sam</td>

<td>Watson</td>

<td>44</td>

</tr>

 

</table>

 

</body>

 

</html>


enam, Penambahan cell yang Terdiri dari Beberapa Kolom pada Tabel HTML: Untuk dapat membuat cell span lebih dari satu kolom, maka digunakan atribut colspan.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

table, th, td 

{

border: 1px solid black;

border-collapse: collapse;}

 

th, td 

{

padding: 5px;

text-align: left;}

</style>

</head>

 

<body>

 

<h2>

Sel Span Dua Kolom:

</h2>

 

<table style="width:100%">

<tr>

<th>Name</th>

<th colspan="2">Telephone</th>

</tr>

 

<tr>

<td>Salman Khan</td>

<td>9125577854</td>

<td>8565557785</td>

</tr>

 

</table>

 

</body>

 

</html>


tujuh, Penambahan Cell yang Terdiri dari Banyak Baris pada Tabel HTML: untuk membuat cell yang terdiri dari lebih dari satu baris, maka digunakan atribut rowspan.

Sintak: rowspan="..."

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<style>

table, th, td 

{

border: 1px solid black;

border-collapse: collapse;}

 

th, td 

{

padding: 5px;

text-align: left;}

</style>

</head>

 

<body>

 

<h2>

Cell Span Dua Baris:

</h2>

 

<table style="width:100%">

 

<tr>

<th>Name:</th>

<td>Sulaiman Khan</td>

</tr>

 

<tr>

<th rowspan="2">Telephone:</th>

<td>9125577854</td>

</tr>

 

<tr>

<td>8565557785</td>

</tr>

 

</table>

 

</body>

 

</html>


delapan, Penambahan Caption pada Tabel HTML: untuk menambahkan caption pada tabel maka digunakan tag caption.

Sintak: <caption>...</caption>

Contoh:

<html>

 

<head>

<style>

table, th, td 

{

border: 1px solid black;

border-collapse: collapse;}

 

th, td 

{

padding: 20px;}

 

th 

{

text-align: left;}

</style>

</head>

 

<body>

 

<table style="width:100%">

 

<caption>DETAILS</caption>

 

<tr>

<th>Nama Awalan</th>

<th>Nama Akhiran</th>

<th>Usia</th>

</tr>

 

<tr>

<td>Kajol</td>

<td>Gogon</td>

<td>26</td>

</tr>

 

<tr>

<td>Juleha</td>

<td>Peter</td>

<td>34</td>

</tr>

 

<tr>

<td>Samsan</td>

<td>Watson</td>

<td>41</td>

</tr>

 

</table>

 

</body>

 

</html>


sembilan, Penambahan Background Color pada Tabel HTML: Warna dapat ditambahkan pada background tabel HTML dengan menggunakan pilihan background-color.

Sintak: background-color: ...;

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

table, th, td 

{

border: 1px solid black;

border-collapse: collapse;}

 

th, td 

{

padding: 5px;

text-align: left;}

 

table#t01 

{

width: 100%;

background-color: #f2f2d1;}

</style>

</head>

 

<body>

 

<table style="width:100%">

 

<tr>

<th>Nama Awalan</th>

<th>Nama Akhiran</th>

<th>Usia</th>

</tr>

 

<tr>

<td>Prianca</td>

<td>Coper</td>

<td>25</td>

</tr>

 

<tr>

<td>Arunila</td>

<td>Khan</td>

<td>33</td>

</tr>

 

<tr>

<td>Sam</td>

<td>Simorangkir</td>

<td>42</td>

</tr>

 

</table>

 

<br />

<br />

 

<table id="t01">

 

<tr>

<th>Nama Awalan</th>

<th>Nama Akhiran</th>

<th>Usia</th>

</tr>

 

<tr>

<td>Sule</td>

<td>Sutisna</td>

<td>26</td>

</tr>

 

<tr>

<td>Riris</td>

<td>Purnamasari</td>

<td>17</td>

</tr>

 

<tr>

<td>Sam</td>

<td>Hutabarat</td>

<td>44</td>

</tr>

 

</table>

 

</body>

 

</html>


sepuluh, Membuat Tabel Bersarang pada HTML: tabel bersarang secara sederhana berarti membuat tabel di dalam tabel lainnya. Tabel bersarang akan membawa kepada proses pembuatan tabel yang lebih komplek yang secara visual lebih menarik namun memiliki potensi error yang lebih besar pula.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<table border=5 bordercolor=black>

 

<tr>

<td>Kolor Pertama Outer Table</td>

 

<td>

  <table

  border=5

  bordercolor=grey>

  

  <tr>

  <td>

  Baris Pertama Inner

  Table

  </td>

  </tr>

 

  <tr>

  <td>

  Baris Kedua Inner

  Table

  </td>

  </tr>

  </table>

</td>

</tr>

 

</table>

 

</body>

 

</html>


Artikel ini didedikasikan kepada: Vildatul Savana, Vivi Khoriyah, Wina Nisrina Nalini, Yoga Sakti Kurniawan, dan Afifa Eka Kencana.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

30 komentar untuk "Membuat Tabel HTML Menggunakan Tag Table"

  1. AnonimSelasa, 13 Juli 2021 pukul 19.48.00 WIB

    Apa yang dimaksud dengan tag table pada dokumen HTML?

    BalasHapus
    Balasan
    1. AnonimSelasa, 13 Juli 2021 pukul 19.49.00 WIB

      Struktur HTML digunakan untuk membuat baris dan kolom pada halaman website. Tag table mendefinisikan tabel secara keseluruhan dan tag baris tabel TR mendefinisikan setiap baris yang terdapat dalam tag table. Tag Tabel data TD digunakan untuk mendefinisikan data aktual pada sebuah tabel. Sebelum adanya, HTML 5 tag table hampir selalu digunakan pada setiap elemen pada dokumen HTML.

      Hapus
  2. AnonimSelasa, 13 Juli 2021 pukul 19.51.00 WIB

    Apa tujuan penggunaan tabel pada dokumen HTML?

    BalasHapus
    Balasan
    1. AnonimSelasa, 13 Juli 2021 pukul 19.51.00 WIB

      Model tabel HTML memungkinkan user untuk mengatur data, teks, teks yang telah diformat sebelumnya, gambar, tautan atau link, formulir, bidang formulir, table jenis lain, dan lain sebagainya ke dalam baris dan kolom sel tabel pada dokumen HTML. Setiap tabel mungkin memiliki keterangan terkait yang memberikan deskripsi singkat tentang tujuan dari pembuatan tabel tersebut pada dokumen HTML.

      Hapus
  3. AnonimSelasa, 13 Juli 2021 pukul 19.52.00 WIB

    Apa pendefinisian dari sebuah tabel secara sederhana?

    BalasHapus
    Balasan
    1. AnonimSelasa, 13 Juli 2021 pukul 19.52.00 WIB

      Tabel merupakan struktur data yang mengatur informasi ke dalam baris dan kolom. Tabel dapat digunakan untuk menyimpan dan menampilkan data dalam format terstruktur. Contoh, database menyimpan data dalam tabel sehingga informasi dapat diakses dengan cepat dari baris tertentu.

      Hapus
  4. AnonimKamis, 04 Agustus 2022 pukul 22.10.00 WIB

    Tag TABLE mendefinisikan tabel pada laman HTML. Setiap baris pada tabel didefinisikan dengan tag TR. Setiap data atau sel tabel didefinisikan dengan tag TD. Secara default, teks dalam elemen TH akan dicetak tebal dan berada pada posisi tengah. Serta, secara default teks yang berada dalam elemen TD akan otomatis tersusun secara beraturan dan berada pada posisi rata kiri.

    BalasHapus
  5. AnonimKamis, 04 Agustus 2022 pukul 22.10.00 WIB

    Bagaimana cara yang paling tepat untuk menggunakan tabel pada html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 22.10.00 WIB

      Tag tabel sebaiknya digunakan untuk penyusunan data yang bentuknya tabulasi. Namun, kebanyakan perancang web pemula menggunakan tabel untuk melakukan penaataan web. Contoh, seorang perancang membuat sebuah tabel dimana pada bris bertama tabel diisi dengan header, baris kedua diisi dengan kolom konten, dan baris terakhir diisi dengan header. Tindakan ini bukanlah suatu hal yang salah, namun penggunaannya kurang tepat, karena tabel sifatnya kurang dinamis ketimbang menggunakan CSS.

      Hapus
  6. AnonimKamis, 04 Agustus 2022 pukul 22.11.00 WIB

    Hindari penggunaan tabel pada pembuatan laman html karena dapat membuat laman web yang dibuat tersebut kurang SEO friendly.

    BalasHapus
  7. AnonimKamis, 04 Agustus 2022 pukul 22.13.00 WIB

    Ada dua atribut yang disebut cellpadding dan cellspacing yang dapat digunakan oleh perancang web untuk mengatur white space pada sel tabel. Atribut cellspacing mendefinisikan spasi antara sel tabel, sedangkan cellpadding mewakili jarak antara batas sel dan konten yang ada dalam sel.

    BalasHapus
  8. AnonimKamis, 04 Agustus 2022 pukul 22.13.00 WIB

    Atribut cellspacing menentukan ukuran ruang antar sel dalam satuan pixel. Cellspacing berbeda dengan cellpadding yang digunakan untuk menentukan ruang antara border sell dan konten sel.

    BalasHapus
  9. AnonimKamis, 04 Agustus 2022 pukul 22.14.00 WIB

    Bagaimana cara menambahkan cellpadding pada laman html, menggunakan atribut STYLE?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 22.14.00 WIB

      Untuk dapat mengisi cell pada html, maka dapat digunakan atribut style. Atribut style menentukan gaya sebaris dari sebuah elemen. Atribut digunakan dengan tag HTML TABLE yang didalamnya terdapat properti padding.

      Hapus
  10. AnonimKamis, 04 Agustus 2022 pukul 22.14.00 WIB

    Apa perbedaan mendasar antara cellspacing dan cellpadding pada html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 22.15.00 WIB

      Cellspacing juga digunakan untuk pemformatan tabel tetapi ada beberapa perbedaan besar antara cellspacing dan cellpadding. Cellpadding digunakan untuk mengatur ruang ekstra yang berguna untuk memisahkan dinding sel dari isinya. Sedangkan untuk cell spacing, digunakan untuk mengatur jarak antar cell.

      Hapus
  11. AnonimKamis, 04 Agustus 2022 pukul 22.20.00 WIB

    Apa fungsi utama atribut lebar yang terdapat pada tabel html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 22.20.00 WIB

      Atribut TABLE WIDTH atau lebar digunakan untuk menentukan ukuran lebar tabel terhadap layar dengan satuan pixel. Jika atribut width tidak diatur pada tabel, maka tabel akan membuat ukuran lebar secara default pada laman html.

      Hapus
  12. AnonimKamis, 04 Agustus 2022 pukul 22.21.00 WIB

    Bagaimana cara mengatur ukuran lebar tabel dengan menggunakan CSS?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 22.21.00 WIB

      Salah satu alternatif untuk mengatur ukuran lebar tabel adalah dengan menggunakan atribut SYTLE. Atribut STYLE menentukan gaya baris pada sebuah elemen yang dipengaruhinya. Atribut tersebut digunakan dengan tag HTML TABLE dengan properti WIDTH yang ditelakkan dalam atribut CSS.

      Hapus
  13. AnonimKamis, 04 Agustus 2022 pukul 22.24.00 WIB

    Apa fungsi rowspan pada tabel html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 22.24.00 WIB

      Atribut baris ROWSPAN pada html digunakan untuk menentukan jumlah baris yang harus diatur pada cel tabel. Jika sebuah baris terdiri dari dua, maka salah satunya dapat memakan ruang dari dua baris tersebut dalam sebuah tabel menggunakan ROWSPAN. Hal ini memungkinkan untuk sel tabel tunggal untuk menjangkau ketinggian yang lebih dari satu sel atau baris.

      Hapus
    2. AnonimKamis, 04 Agustus 2022 pukul 22.24.00 WIB

      ROWSPAN dan COLSPAN adalah bagian dari tag TD dalam TABEL HTML yang digunakan untuk menentukan jumlah baris ataupun jumlah kolom yang harus disediakan pada sebuah tabel atau sel.

      Hapus
  14. AnonimKamis, 04 Agustus 2022 pukul 22.25.00 WIB

    Bagaimana cara memberi batas pada tabel yang tidak terlihat?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 22.25.00 WIB

      Cukup kecilkan nilai batas tabel dan hapus batas tersebut dari sel tabel pada elemen TD. Jika proses tersebut tidak dilakukan secara eksplisit maka melakukan pengaturan border-collapse antar browser tidak bisa dilakukan.

      Hapus
  15. AnonimKamis, 04 Agustus 2022 pukul 22.27.00 WIB

    Apa fungsi caption pada tag html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 22.27.00 WIB

      Tag CAPTION mendefinisikan judul pada sebuah tabel. Tag CAPTION dapat disisipkan setelah tag TABLE. Secara default, keterangan yang ada pada tabel akan berada langsung pada posisi tengah, namun, perancang web juga bisa menggunakan properti TEXT-ALIGN dan CAPTION-SIDE untuk meratakan dan menempatkan caption pada posisi yang tepat.

      Hapus
  16. AnonimKamis, 04 Agustus 2022 pukul 22.27.00 WIB

    Ketika menulis program dalam html, tag CAPTION adalah elemen blok yang digunakan untuk menambahkan judul ke dalam tabel html.

    BalasHapus
  17. AnonimKamis, 04 Agustus 2022 pukul 22.28.00 WIB

    Untuk menambahkan judul ke dalam sebuah tabel, maka perancang situs dapat menempatkan judul pada atribut judul yang terdapat antara perintah TR.

    BalasHapus
  18. AnonimKamis, 04 Agustus 2022 pukul 22.28.00 WIB

    Sesuai dengan singkatannya TH atau TABLE HEAD, fungsi dari atribut ini adalah untuk memberikan judul pada bagian awal dari pembuatan tabel HTML.

    BalasHapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -