Ask Belajar HTML membuat tabel sederhana untuk pemula AdityaDees

Ada beberapa jenis informasi yang perlu ditampilkan dalam kotak tabel. Misalnya: hasil olahraga, laporan saham, jadwal kereta api dan lain sebagainya. Saat mewakili informasi dalam tabel, Anda perlu berpikir dalam hal kisi yang terdiri dari baris dan kolom (sedikit seperti lembar kerja). Dalam bab ini Anda akan belajar bagaimana:

• Gunakan empat elemen kunci untuk membuat tabel
• Mewakili data yang kompleks menggunakan tabel
• Tambahkan keterangan ke tabel

Sebuah tabel mewakili informasi dalam format grid. Contoh tabel termasuk laporan keuangan, TV jadwal, dan hasil olahraga.Grid memungkinkan kita untuk mengerti data kompleks dengan referensi informasi pada dua sumbu. Setiap blok di grid disebut sebagai sel tabel. Dalam HTML tabel ditulis baris demi baris.

Struktur basic tabel

Elemen <table> digunakan untuk membuat tabel. Isi dari tabel ditulis baris dengan baris. Anda menunjukkan awal dari masing-masing baris dengan menggunakan tag pembuka <tr>.

Ini diikuti oleh satu atau lebih elemen <td> satu untuk setiap sel di baris itu. Di akhir baris Anda menggunakan tag </tr> sebagai penutup. Setiap sel dari sebuah tabel adalah direpresentasikan menggunakan elemen <td> . Di akhir setiap sel Anda menggunakan tag </td< sebagai penutup.

				
<table>
 <tr>
 <td>15</td>
 <td>15</td>
 <td>30</td>
 </tr>
 <tr>
 <td>45</td>
 <td>60</td>
 <td>45</td>
 </tr>
 <tr>
 <td>60</td>
 <td>90</td>
 <td>90</td>
 </tr>
</table>								
								
								
				

Hasil :

15	15	30
45	60	45
60	90	90

Table Heading

Elemen <th> digunakan hanya seperti elemen <td> tapi itu tujuannya adalah untuk mewakili menuju kolom atau berturut-turut. Bahkan jika sel tidak memiliki konten, Anda masih harus menggunakan <td> atau <th> elemen untuk mewakili adanya sel kosong.

Menggunakan elemen <th> untuk heading membantu orang yang gunakan pembaca layar, tingkatkan kemampuan mesin pencari untuk mengindeks halaman Anda, dan juga memungkinkan Anda untuk mengontrol tampilan tabel lebih baik ketika Anda mulai menggunakan CSS.

Anda dapat menggunakan atribut lingkup pada elemen <th> untuk menunjukkan apakah itu heading untuk kolom atau baris. Itu bisa mengambil nilai: baris untuk menunjukkan judul untuk baris atau col untuk menunjukkan menuju kolom.

				
<table>
 <tr>
 <th></th>
 <th scope="col">Senin</th>
 <th scope="col">Selasa</th>
 </tr>
 <tr>
 <th scope="row">Tiket terjual:</th>
 <td>120</td>
 <td>135</td>
 </tr>
 <tr>
 <th scope="row">Total penjualan:</th>
 <td>$600</td>
 <td>$675</td>
 </tr>
</table>								
				

Hasil :

	Senin	Selasa
Tiket terjual:	120	135
Total penjualan:	$600	$675

Spanning Columns

Terkadang Anda mungkin membutuhkan entri dalam tabel untuk diregangkan melintasi lebih dari satu kolom. Atribut colspan dapat berupa digunakan pada elemen <th> atau <td> dan menunjukkan berapa banyak kolom sel yang harus dijalankan.

 				
 <table>
  <tr>
  <th></th>
  <th>9am</th>
  <th>10 pagi</th>
  <th>11am</th>
  <th>12am</th>
  </tr>
  <tr>
  <th>Senin</th>
  <td colspan="2">Geografi</td>
  <td>Matematika</td>
  <td>Seni</td>
  </tr>
  <tr>
  <th>Selasa</th>
  <td colspan="3">Gym</td>
  <td>Beranda Ec</td>
  </tr>
 </table>							
 								
 				
 

Hasil :

	9am	10 pagi	11am	12am
Senin	Geografi		Matematika	Seni
Selasa	Gym			Beranda Ec

Pada contoh di atas Anda dapat melihat jadwal dengan lima kolom; kolom pertama berisi judul untuk itu baris (hari), empat sisanya mewakili slot waktu satu jam .

Jika Anda melihat sel tabel itu mengandung kata 'Geografi' Anda akan melihat bahwa nilai atribut colspan adalah 2, yang menunjukkan bahwa sel harus berjalan melintasi dua kolom. Di ketiga baris, 'Gym' berjalan di tiga kolom.

Anda dapat melihat bahwa yang kedua dan baris ketiga memiliki lebih sedikit <td> elemen daripada yang ada kolom. Ini karena, ketika sebuah sel memanjang lebih dari satu kolom, <td> atau <th> sel yang seharusnya ada di tempat sel yang lebih luas tidak termasuk dalam kode.

Spanning Row

Anda mungkin juga memerlukan entri untuk direntangkan lebih dari satu baris. Atribut berupa rowspan dapat digunakan pada elemen <th> atau <td> untuk menunjukkan berapa banyak baris sel harus merentang ke bawah .

				
<table>
  <tr>
  <th></th>
  <th>ABC</th>
  <th>BBC</th>
  <th>CNN</th>
  </tr>
  <tr>
  <th>6pm - 7pm</th>
  <td rowspan="2">Film</td>
  <td>Komedi</td>
  <td>Berita</td>
  </tr>
  <tr>
  <th>7pm - 8pm</th>
  <td>Olahraga</td>
  <td>Urusan Saat Ini</td>
  </tr>
 </table>								
				

Hasil :

	ABC	BBC	CNN
6pm - 7pm	Film	Komedi	Berita
7pm - 8pm		Olahraga	Urusan Saat Ini

Contoh table

					
								
<html>
 <head>
  <title>Tabel</title>
 </head>
 <body>
  <table>
  <thead>
  <tr>
  <th></th>
  <th scope="col">Hosting awal rumah</th>
  <th scope="col">Hosting bisnis premium</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <th scope="row">Ruang disk</th>
  <td>250mb</td>
  <td>1gb</td>
  </tr>
  <tr>
  <th scope="row">Bandwidth</th>
  <td>5gb per bulan</td>
  <td>50gb per bulan</td>
  </tr>
  <!-- lebih banyak baris seperti dua di atas di sini -->
  </tbody>
  <kaki>
  <tr>
  <td></td>
  <td colspan="2">Daftar sekarang dan hemat 10%!</td>
  </tr>
  </tfoot>
  </table>
 </tbody>
 </html>									
					
	

	Hosting awal rumah	Hosting bisnis premium
Ruang disk	250mb	1gb
Bandwidth	5gb per bulan	50gb per bulan
	Daftar sekarang dan hemat 10%!

Contoh tabel

CSS

					
									
.content {
	 border-collapse: collapse;
	 margin: 25px 0; 
	 font-size: 0.9em; 
	 min-width: auto; 
	 border-radius: 5px 5px 0 0;
	 overflow: hidden; 
	 box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	  } 
.content thead tr { 
	 background-color: #1B1464; 
	 color: #ffffff; 
	 text-align: left; 
	 font-weight: bold; 
	 } .content th, .content td {
	  padding: 12px 15px;
	   } 
.content tbody tr { 
	  border-bottom: 1px solid #dddddd;
	   }
.content tbody tr:nth-of-type(even) { background-color: #f3f3f3; 
} 
.content tbody tr:last-of-type { border-bottom: 2px solid #1B1464;
 } 
.content tbody tr.r { 
	   font-weight: bold; color: #1B1464; 
	   } 
					
	

HTML

					
<table class="content"> 
<thead> 
<tr> 
<th>Reg:No</th> 
<th>Nama</th> 
<th>Poin</th> 
<th>peringkat</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>0011</td> 
<td>Jono</td> 
<td>510</td> 
<td>56</td> 
</tr> 
<tr class="r"> 
<td>1520</td> 
<td>Doris</td> 
<td>720</td> 
<td>45</td> 
</tr> 
<tr> 
<td>1812</td> 
<td>Sara</td> 
<td>250</td> 
<td>225</td> 
</tr> 
</tbody> 
</table>									
					
	

Hasil :

Reg:No	Nama	Poin	peringkat
0011	Jono	510	56
1520	Doris	720	45
1812	Sara	250	225

Selanjutnya