Manakah berikut ini yang merupakan struktur dasar membuat tabel pada html?

Sebuah dokumen tidak jarang digunakan untuk menampilkan data kepada penggunanya. Terdapat banyak cara untuk menampilkan data, mulai dari dengan menggunakan grafik, daftar, sampai dengan tabel. Untuk menampilkan data dengan grafik pada HTML, kita dapat menggunakan gambar (elemen img), sementara daftar jelas dibuat menggunakan elemen list. Bagaimana dengan tabel? HTML memiliki elemen khusus untuk membuat tabel, yaitu table.

Pembuatan Tabel

Sebuah tabel selalu terdiri dari dua elemen utama, yaitu baris dan kolom. Tentunya HTML memiliki elemen untuk membuat baris dan kolom dari sebuah tabel, tetapi sebelum membuat baris dan kolom dari tabel kita harus membuat tabelnya terlebih dahulu. Pembuatan tabel dimulai dari inisialisasi tabel, menggunakan elemen table:

dan selanjutnya, kita dapat menambahkan baris ke dalam tabel tersebut dengan menggunakan elemen tr:

dan setiap baris dari tabel tentunya harus diisikan dengan data, yang akan menghasilkan kolom tabel. Pengisian data pada tabel dilakukan dengan menggunakan elemen td, seperti berikut:

    

        
NIM
        
Nama
    
    

        
23511000
        
Alex Xandra Albert Sim
    

maka kita akan mendapatkan sebuah tabel HTML, seperti berikut:

Tabel Standar pada Chrome

Perhatikan bahwa dengan kode minimal kita mendapatkan sebuah tabel tanpa garis pembatas untuk setiap data, dan juga bahwa jumlah kolom dari tabel ditambahkan secara otomatis. HTML tidak membatasi jumlah kolom yang kita buat, selama elemen td berada di dalam elemen tr. Browser secara otomatis akan menambahkan jumlah kolom sesuai dengan jumlah elemen td yang terbanyak pada sebuah tr dalam HTML.

Pembatas (Border) Tabel

Pembuatan tabel yang telah kita lakukan sampai pada titik ini merupakan tabel yang tidak memiliki pembatas antar sel tabel. Tampilan standar yang diberikan HTML seperti ini sangat jarang dijumpai di dalam dokumen pada umumnya. Biasanya, tabel yang kita jumpai selalu memiliki batas antar setiap sel, sehingga membuat tabel tanpa batas akan menjadi aneh dan membingungkan pengguna.

Untungnya, CSS telah memberikan fasilitas untuk memberikan tabel pada elemen-elemen yang ada, melalui properti border. Kita dapat menggunakan properti ini untuk memberikan garis pembatas antar setiap sel pada tabel, seperti berikut:

    
    Table Test

    


    

        

            
 
            
Senin
            
Selasa
            
Rabu
        
        

            
TI-A
            
Basis Data
            
Desain Web
            
Matematik
        
        

            
TI-B
            
Desain Web
            
Struktur Data
            
Basis Data
        
        

            
TI-C
            
Struktur Data
            
Pemrograman
            
Matematika
        
    

Coba jalankan kode di atas untuk mendapatkan hasil seperti berikut:

Pembatas Tabel

Ternyata properti border tidak dapat menghasilkan pembatas pada sel tabel secara otomatis! Untuk menanggulanginya, kita perlu menambahkan kode border tersebut pada elemen td dan th juga, sehingga kode CSS menjadi seperti berikut:

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

dan kita akan mendapatkan pembatas pada setiap sel:

Pembatas Tabel pada Setiap Sel

Seperti yang dapat dilihat pada gambar , secara otomatis browser akan menambahkan jarak pada setiap sel yang ada. Untuk menambah dan mengurangi jarak antar sel ini kita dapat menggunakan properti CSS border-spacing, yang hanya dapat digunakan untuk elemen table. Tambahkan kode CSS baru berikut untuk melihat contoh penggunaan border-spacing:

table {
    border-spacing: 15px;
}

Jarak Tiap Sel pada Tabel

Jika ingin menghilangkan keseluruhan jarak pada sel, kita dapat menggunakan properti border-collapse, yang sama seperti border-spacing hanya dapat digunakan pada elemen table. Properti border-collapse dapat diisikan dengan dua nilai, yaitu separate dan collapse. Nilai standar dari browser ialah separate, yang akan menghasilkan jarak antar sel. Nilai collapse, seperti yang telah dapat ditebak, akan menghilangkan segala jarak antar sel.

table {
    border-collapse: collapse;
}

Menghilangkan Jarak Tiap Sel pada Tabel

Menggabungkan Beberapa Sel

Dalam membuat tabel, seringkali kita akan memerlukan penggabungan beberapa sel sekaligus. Mungkin saja nilai dari sel pada beberapa baris adalah sama. Bisa juga penggabungan dilakukan untuk memperindah tampilan tabel. HTML menyediakan fasilitas untuk menggabungkan beberapa sel dengan menggunakan atribut colspan dan rowspan pada elemen td atau th.

Seperti namanya, colspan digunakan untuk menggabungkan beberapa kolom sekaligus, dan rowspan digunakan untuk menggabungkan beberapa baris sekaligus. Nilai yang diisikan pada kedua atribut ini ialah berapa banyak sel yang ingin digabungkan. Misalnya jika ingin menggabungkan tiga kolom, maka kita dapat menuliskan colspan="3". Setelah menggabungkan sel, tentunya kita harus menuliskan lebih sedikit baris atau kolom pada bagian tabel berikutnya.

Untuk mempermudah ilustrasi, perhatikan kode berikut:

    

        
Teams
        
Scores
    
    

        
Win
        
Draw
        
Lost
    
    

        
Na'Vi
        
4
        
1
        
3
    
    

        
invictus Gaming
        
6
        
1
        
1
    

yang akan menghasilkan tabel seperti berikut:

Menggabungkan Kolom dan Baris pada Tabel

Perhatikan bagaimana jumlah th berbeda pada baris pertama dan baris kedua, sesuai dengan penggabungan kolom yang dilakukan. th pertama pada baris pertama memiliki atribut rowspan="2" yang berarti sel yang bersangkutan akan bergabung dengan sel pada kolom yang sama di baris berikutnya, sehingga tr untuk baris kedua hanya memiliki tiga buah th. Selanjutnya, th kedua pada baris pertama memiliki atribut colspan="3", yang berarti tiga kolom selanjutnya akan digabungkan ke dalam satu kolom, sehingga hanya terdapat dua th pada baris ini (dua th selanjutnya tidak perlu dituliskan lagi karena telah digabungkan pada th kedua).

Perhatikan juga bagaimana atribut scope digunakan pada th yang relevan (memiliki arti langsung pada data) seperti jumlah kemenangan dan nama tim, tetapi browser tidak dapat secara langsung sel yang bersangkutan merupakan nilai kombinasi. Browser dapat mengetahui bahwa sebuah tim memiliki empat kemenangan, dan Na’vi memiliki skor 4/1/3, tetapi browser tidak dapat mengetahui bahwa Na’vi memiliki empat kemenangan.

Jika kita dapat secara langsung melihat tabel hasil penampilan browser tentunya hal ini tidak menjadi masalah. Tetapi untuk pengguna yang menggunakan alat bantu seperti screen reader, kita perlu memberitahukan secara khusus ke browser sel-sel yang relevan terhadap sebuah nilai. Pemberian makna semantik seperti ini dapat dilakukan dengan memanfaatkan atribut headers pada elemen td.

Atribut headers menerima nilai berupa id dari sel bersangkutan yang memberikan arti pada tabel tersebut. Karena model dari tabel yang mengharuskan kita melihat beberapa sel sekaligus, maka kita dapat mengisikan beberapa id sekaligus ke dalam atribut ini, dengan pemisah berupa spasi. Misalnya, kita dapat memberikan id pada setiap th yang ada pada tabel seperti berikut:

dan kemudian memberitahukan setiap sel yang menyimpan nilai masing-masing id yang relevan terhadap nilai tersebut, seperti berikut:
    
sehingga perangkat lunak screen reader mengetahui bahwa sel yang berisi nilai “4” merupakan pencatatan akan jumlah kemenangan sebuah tim yang bernama “Na’vi”. Bahkan sebenarnya sebuah perangkat lunak screen reader yang baik akan membaca sel tersebut sebagai “Teams Na’Vi Win Scores is 4”, sesuai dengan isi dari masing-masing sel.
 

			
Apa perintah HTML untuk membuat tabel?
			
Tag untuk Membuat Tabel di HTML

 Tag <table> untuk membungkus tabelnya. Tag <thead> untuk membungkus bagian kepala tabel. Tag <tbody> untuk membungkus bagian body dari tabel. Tag <tr> (tabel row) untuk membuat baris.
		
			
Jelaskan apa itu tabel pada HTML?
			
Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris dan kolom. pada HTML, untuk membuat tabel menggunakan tag <table>. Biasanya tag <table> digunakan untuk menampilkan data yang struktur atau tampilan data dari database.
		
			
Apa itu TR dan TD dalam HTML?
			
Elemen <tr> digunakan untuk mendefinisikan pembuatan baris pada tabel. Elemen <td> digunakan untuk membuat kolom atau sel di setiap baris pada tabel.
		
			
Jika ingin membuat sebuah tabel di dalam HTML tag Apakah yang pertama di buat?
			
<table> – tag pertama yang wajib ditulis saat membuat tabel, berfungsi untuk membungkus tabel. <thead> – berfungsi untuk membungkus kepala tabel. <tbody> – berfungsi untuk membungkus tubuh tabel. <tr> – berfungsi untuk membuat baris tabel, singkatan dari Table Row.