Membuat Tabel HTML – Dalam menyajikan suatu data dan informasi, agar kelihatan rapi, terstruktur, dan mudah dipahami maka data tersebut perlu dibuat dalam bentuk terstruktur yang disebut dengan tabel. Tabel banyak dipakai untuk menampilkan suatu data maupun analis data.
Tabel merupakan struktur yang digunakan untuk menampilan data dalam bentuk kolom dan baris. Element yang digunakan untuk membuat tabel di HTML adalah
Table Head
Tabel head merupakan komponen tabel yang terletak pada bagian atas tabel. Tabel head digunakan untuk menempatkan judul data yang ingin ditampilkan. Tag yang digunakan untuk membuat table head adalah … .
Table Row
Table row merupakan komponen tabel yang mendefinisikan baris suatu tabel HTML. Yang dimaksud baris pada tabel adalah sel tabel yang memanjang dari kiri ke kanan. Untuk membuat table row gunakan tag
Table Data
Table data berfungsi sebagai sel tabel yaitu sel yang digunakan untuk menempatkan atau menuliskan data tabel tersebut. Table data pada element
… | . Table data juga mendefinisikan jumlah dari kolom tabel.
Baris 1/Kolom 1 | Baris 1/Kolom 2 | Baris 1/Kolom 3 | Baris 1/Kolom 4 |
Baris 2/Kolom 1 | Baris 2/Kolom 2 | Baris 2/Kolom 3 | Baris 2/Kolom 4 |
Baris 3/Kolom 1 | Baris 3/Kolom 2 | Baris 3/Kolom 3 | Baris 3/Kolom 4 |
Element
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Membuat Tabel: 3 Baris/4 Kolom dengan Head
Head Kolom 1 Head Kolom 2 Head Kolom 3 Head Kolom 4 Baris 1/Kolom 1 Baris 1/Kolom 2 Baris 1/Kolom 3 Baris 1/Kolom 4 Baris 2/Kolom 1 Baris 2/Kolom 2 Baris 2/Kolom 3 Baris 2/Kolom 4 Baris 3/Kolom 1 Baris 3/Kolom 2 Baris 3/Kolom 3 Baris 3/Kolom 4
Kedua contoh tabel di atas tidak memiliki border dan jarak antar data juga masih berdekatan. Untuk itu tabel perlu kita manipulasi dengan menambahkan atribut-atribut yang sesuai sehingga diperoleh tampilan tabel data yang menarik. Mari kita bahas satu persatu atribut tabel.
Daftar Isi
Membuat Table HTML – Border
Tabel tanpa menggunakan border akan kelihatan seperti susunan kalimat biasa tanda ada batas antar kolom dan baris. Untuk mengatasi masalah ini ditambahkan atribut tabel yaitu border pada tag
Baris 1/Kolom 1 | Baris 1/Kolom 2 | Baris 1/Kolom 3 | Baris 1/Kolom 4 |
Baris 2/Kolom 1 | Baris 2/Kolom 2 | Baris 2/Kolom 3 | Baris 2/Kolom 4 |
Baris 3/Kolom 1 | Baris 3/Kolom 2 | Baris 3/Kolom 3 | Baris 3/Kolom 4 |
Selain cara di atas, kita dapat memanipulasi bentuk border dengan tambah kode CSS, mulai dari ketebalan, style [solid, dotted, dashed], dan warna. Contoh membuat tabel dengan ketebalan 2px, bentuk dotted, warna merah. Biar lebih mudah kita pisahkan kode HTML dan CSS:
Kode pada file index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Membuat Tabel
Head Kolom 1 Head Kolom 2 Head Kolom 3 Head Kolom 4 Baris 1/Kolom 1 Baris 1/Kolom 2 Baris 1/Kolom 3 Baris 1/Kolom 4 Baris 2/Kolom 1 Baris 2/Kolom 2 Baris 2/Kolom 3 Baris 2/Kolom 4 Baris 3/Kolom 1 Baris 3/Kolom 2 Baris 3/Kolom 3 Baris 3/Kolom 4
Kode CSS:
1
2
3
table, th, td {
border: 2px dotted red;
}
Untuk membuat single border, tambahkan property border-collapse pada CSS, sehingga menjadi:
1
2
3
4
table, th, td {
border: 2px dotted red;
border-collapse: collapse;
}
Baca Juga: Panduan Instalasi Fedora 36
Membuat tabel dengan border tumpul [rounded], gunakan property border-radius pada CSS. Contoh untuk border dengan ukuran 1 px, solid, dan warna hitam:
1
2
3
4
table, th, td {
border: 1px solid black;
border-radius: 5px;
}
Menghapus border bagian luar tabel dengan cara hilangkan selector table pada kode CSS sehingga menjadi:
1
2
3
4
th, td {
border: 1px solid black;
border-radius: 5px;
}
Membuat tabel dengan border luar 2px, solid, biru dan border dalam 2px, dashed, merah, radius 5px, kode CSS yang digunakan:
1
2
3
4
5
6
7
table {
border: 2px solid blue;
}
th, td {
border: 2px solid red;
border-radius: 5px;
}
Selain ketiga style di atas, terdapat gaya lain yang dapat kita terapkan pada border tabel yaitu double, groove, ridge, inset, outset, none, hidden. Seperti apa bentuknya, silakan dicoba satu per satu.
Table Sizes
Ukuran tabel di HTML jika tidak diatur akan mengikuti lebar dari data yang ada di sel tabel. Untuk mengcustom ukuran atau size tabel, tambahkan atribut style pada tag
Baris 1/Kolom 1 | Baris 1/Kolom 2 | Baris 1/Kolom 3 | Baris 1/Kolom 4 |
Baris 2/Kolom 1 | Baris 2/Kolom 2 | Baris 2/Kolom 3 | Baris 2/Kolom 4 |
Baris 3/Kolom 1 | Baris 3/Kolom 2 | Baris 3/Kolom 3 | Baris 3/Kolom 4 |
Kita dapat mengatur ukuran tabel pada kolom tertentu, contoh mengatur size kolom 1 dengan lebar 10% dan kolom 2 sebesar 40% dari lebar tabel, tambahkan atribut style pada tag kolom tersebut seperti contoh berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Membuat Tabel
Head Kolom 1 Head Kolom 2 Head Kolom 3 Head Kolom 4 Baris 1/Kolom 1 Baris 1/Kolom 2 Baris 1/Kolom 3 Baris 1/Kolom 4 Baris 2/Kolom 1 Baris 2/Kolom 2 Baris 2/Kolom 3 Baris 2/Kolom 4 Baris 3/Kolom 1 Baris 3/Kolom 2 Baris 3/Kolom 3 Baris 3/Kolom 4
Ukuran tabel dapat juga diatur sesuai kebutuhan, gunakan satuan px untuk value width seperti contoh berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Membuat Tabel
Head Kolom 1 Head Kolom 2 Head Kolom 3 Head Kolom 4 Baris 1/Kolom 1 Baris 1/Kolom 2 Baris 1/Kolom 3 Baris 1/Kolom 4 Baris 2/Kolom 1 Baris 2/Kolom 2 Baris 2/Kolom 3 Baris 2/Kolom 4 Baris 3/Kolom 1 Baris 3/Kolom 2 Baris 3/Kolom 3 Baris 3/Kolom 4
Dengan cara yang sama dapat dilakukan custom ukuran pada kolom tabel, contoh 20px untuk lebar kolom 1 dan 250px untuk lebar kolom:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Membuat Tabel
Head Kolom 1 Head Kolom 2 Head Kolom 3 Head Kolom 4 Baris 1/Kolom 1 Baris 1/Kolom 2 Baris 1/Kolom 3 Baris 1/Kolom 4 Baris 2/Kolom 1 Baris 2/Kolom 2 Baris 2/Kolom 3 Baris 2/Kolom 4 Baris 3/Kolom 1 Baris 3/Kolom 2 Baris 3/Kolom 3 Baris 3/Kolom 4
Selain kolom, head dan baris tabel juga dapat dicustom dari ukuran normal dengan cara menambahkan atribut style pada tag
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Membuat Tabel
Head Kolom 1 Head Kolom 2 Head Kolom 3 Head Kolom 4 Baris 1/Kolom 1 Baris 1/Kolom 2 Baris 1/Kolom 3 Baris 1/Kolom 4 Baris 2/Kolom 1 Baris 2/Kolom 2 Baris 2/Kolom 3 Baris 2/Kolom 4 Baris 3/Kolom 1 Baris 3/Kolom 2 Baris 3/Kolom 3 Baris 3/Kolom 4
Baca Juga: Perintah Dasar Sistem Operasi Linux
Ukuran tabel juga dapat dicustom dengan kode CSS. Contoh membuat tabel dengan ukuran 100% [lebar browser], tambahkan kode CSS berikut:
1
2
3
4
5
6
table {
width: 100%;
}
table, th, td {
border: 2px solid black;
}
Untuk mengcustom size pada kolom dan baris tertentu, terlebih dahulu tambahkan atribut class pada tag
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Membuat Tabel
Head Kolom 1 Head Kolom 2 Head Kolom 3 Head Kolom 4 Baris 1/Kolom 1 Baris 1/Kolom 2 Baris 1/Kolom 3 Baris 1/Kolom 4 Baris 2/Kolom 1 Baris 2/Kolom 2 Baris 2/Kolom 3 Baris 2/Kolom 4 Baris 3/Kolom 1 Baris 3/Kolom 2 Baris 3/Kolom 3 Baris 3/Kolom 4
Sekarang kita tambahkan kode CSS dengan lebar kolom 1 [15%], kolom 4 [40%], tinggi baris 2 [50px], dan baris 3 [100px]:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
table {
width: 100%;
}
table, th, td {
border: 2px solid black;
}
.kolom1 {
width: 15%;
}
.kolom4 {
width: 40%;
}
.baris2 {
height: 50px;
}
.baris3 {
height: 100px;
}
Membuat Tabel HTML – Padding dan Spacing
Untuk mengatur jarak antara data yang terdapat pada sel dengan border tabel kita dapat menggunakan fungsi padding, sedangkan jarak antara border bagian luar dengan border bagian dalam tabel [ketebalan border] disebut dengan spacing. Fungsi padding dan spacing pada tabel dapat kita terapkan dengan menambahkan atribut cellpadding dan cellspacing pada tag
Baris 1/Kolom 1 | Baris 1/Kolom 2 | Baris 1/Kolom 3 | Baris 1/Kolom 4 |
Baris 2/Kolom 1 | Baris 2/Kolom 2 | Baris 2/Kolom 3 | Baris 2/Kolom 4 |
Baris 3/Kolom 1 | Baris 3/Kolom 2 | Baris 3/Kolom 3 | Baris 3/Kolom 4 |
Selain dengan menambahkan atribut, fungsi padding dan spacing dapat juga diterapkan dengan menambahkan kode CSS. Contoh kita ambil kode HTML di atas dengan membuang atribut yang terdapat pada tabel, sehingga penulisan kode CSS nya adalah:
1
2
3
4
5
6
7
8
9
10
11
table, th, td {
border: 2px solid black;
}
table {
width: 100%;
border-spacing: 10px;
}
th, td {
padding: 10px;
}
Untuk mengatur jarak padding atas, kiri, bawah, dan kanan, dapat dilakukan dengan cara menambahkan beberapa value pada property padding. Kita ambil contoh padding atas 30px, kanan 50px, bawah 20px, dan kiri 20px [searah jarum jam], penulisan property padding menjadi:
1
2
3
th, td {
padding: 30px 50px 20px 20px;
}
Atau dapat juga lebih spesifik seperti di bawah ini:
1
2
3
4
5
6
th, td {
padding-top: 30px;
padding-right: 50px;
padding-bottom: 20px;
padding-left: 20px;
}
Membuat Tabel HTML – Colspan dan Rowspan
Colspan dan Rowspan merupakan dua atribut yang digunakan untuk menggabungkan beberapa sel tabel sehingga menjadi satu buah sel. Atribut colspan digunakan untuk menggabungkan beberapa kolom [sel tabel digabungkan secara horizontal], sedangkan rowspan berfungsi menggabungan beberapa baris tabel [sel tabel digabungkan secara vertikal]. Value atribut menyatakan jumlah sel yang akan digabung [merge cells].
Contoh pada kode HTML di atas, kita ingin menggabungkan tabel head kolom 2 dengan head kolom 3, sel tabel baris 2/kolom 4 dengan baris 3/kolom 4:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Membuat Tabel
Head Kolom 1 Head Kolom 2 & Kolom 3 Head Kolom 4 Baris 1/Kolom 1 Baris 1/Kolom 2 Baris 1/Kolom 3 Baris 1/Kolom 4 Baris 2/Kolom 1 Baris 2/Kolom 2 Baris 2/Kolom 3 Baris 2/Kolom 4 & Baris 3/Kolom 4 Baris 3/Kolom 1 Baris 3/Kolom 2 Baris 3/Kolom 3
Baca Juga: Instalasi dan Konfigurasi FTP Server pada Linux Debian 11
Contoh lain kita menggabungkan empat buah sel tabel sekaligus terdiri dari dua kolom dan dua baris. kode HTML menjadi:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Membuat Tabel
Head Kolom 1 Head Kolom 2 Head Kolom 3 Head Kolom 4 Baris 1/Kolom 1 Baris 1/Kolom 2 Baris 1/Kolom 3 Baris 1/Kolom 4 2 Kolom & 2 Baris Baris 2/Kolom 3 Baris 2/Kolom 4 Baris 3/Kolom 3 Baris 3/Kolom 4
Membuat Tabel HTML – Background Color
Untuk menambahkan warna pada sel tabel, kita dapat menggunaan atribut pada element
Baris 1/Kolom 1 | Baris 1/Kolom 2 | Baris 1/Kolom 3 | Baris 1/Kolom 4 |
Baris 2/Kolom 1 | Baris 2/Kolom 2 | Baris 2/Kolom 3 | Baris 2/Kolom 4 |
Baris 3/Kolom 1 | Baris 3/Kolom 2 | Baris 3/Kolom 3 | Baris 3/Kolom 4 |
Selain menggunakan atribut bgcolor, warna tabel juga dapat diatur menggunakan kode CSS. Contoh menambahkan warna tomato pada head table, warna skyblue pada baris 2/kolom 3 dan baris 3/kolom 3. Terlebih dahulu kita tambahkan atribut class pada sel tabel yang ingin diwarnai, sehingga kode HTML nya menjadi:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Membuat Tabel
Head Kolom 1 Head Kolom 2 Head Kolom 3 Head Kolom 4 Baris 1/Kolom 1 Baris 1/Kolom 2 Baris 1/Kolom 3 Baris 1/Kolom 4 Baris 2/Kolom 1 Baris 2/Kolom 2 Baris 2/Kolom 3 Baris 2/Kolom 4 Baris 3/Kolom 1 Baris 3/Kolom 2 Baris 3/Kolom 3 Baris 3/Kolom 4
Sedangkan kode CSS yang harus ditambahkan adalah sebagai berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
table, th, td {
border: 1px solid black;
}
table {
width: 100%;
}
th, td {
padding: 10px;
}
.tomato {
background-color: tomato;
}
.skyblue {
background-color: skyblue;
}
Table Styling
Di atas kita telah belajar bagaimana cara menambahkan warna background pada tabel. Sekarang kita coba manipulasi tabel dengan style tertentu misalnya warna selang seling baris atau kolom [Zebra Striped Table], dan/ atau kombinasi baris dan kolom.
Untuk membuat style tabel seperti ini kita perlu menggunakan kode CSS dengan menambahkan pseudo class selector berupa :nth-child[argument]. Argument bisa berupa angka, urutan ganjil [odd] atau genap [even], dan formula. Dengan selector :nth-child ini kita dapat menyeleksi child element pada parent element [induk]. Misalnya kita ingin menyeleksi satu atau beberapa element
[table data] untuk membuat sel..
Bagaimana cara membuat tabel pada HTML tuliskan strukturnya?Struktur dasar membuat tabel pada HTML adalah tag , . Artinya, hanya dengan 3 tag tersebut kita sudah bisa menampilkan tabel pada web browser.
| Bagaimana cara untuk membuat baris pada table?Klik sel di atas atau di bawah tempat yang ingin Anda tambahkan baris. Di bawah Alat Tabel, di tab Tata Letak, lakukan salah satu hal berikut: Untuk menambahkan baris di atas sel, klik Sisipkan di Atas dalam grup Baris dan Kolom. Untuk menambahkan baris di bawah sel, klik Sisipkan di Bawah dalam grup Baris dan Kolom.
Apa yang dimaksud dengan tabel HTML?Penjelasan HTML table. Tabel [Table] adalah sebuah data tabular dalam bentuk grid yang terdiri dari kolom [column], baris [row] dan celll yang merupakan pertemuan antara kolom dan baris. HTML element merepresentasikan data dengan lebih dari satu dimensi dalam bentuk sebuah tabel [table].
Chủ Đề |