Tabel HTML

Tabel HTML digunakan untuk menampilkan tata letak kotak pada halaman web. Tabel telah digunakan untuk mengapung gambar, untuk memisahkan halaman dalam kolom tetapi untuk tata letak seluruh halaman web. Sejauh ini kami mempelajari tag HTML sederhana tetapi kami perlu membuat lebih banyak tag untuk membangun tabel: banyak baris dan sel.

Desain khusus dibuat dengan styler meja online .

Sumber tabel HTML 2x2 yang sangat mendasar akan terlihat seperti ini:

< table > < tbody > < tr > < td > 1 </ td > < td > 2 </ td > </ tr > < tr > < td > 3 </ td > < td > 4 </ td > </ tr > </ tbody > </ table >

Ini membuat seperti ini di halaman: 1 2 3 4

Kami menggunakan tag berikut untuk membangun struktur ini:

meja	- membungkus seluruh meja
tbody	- tubuh
tr	- baris
td	- sel

Generator Tabel HTML

Berita baiknya adalah Anda tidak perlu menulis kode seperti itu karena generator tabel online akan membuat kode untuk Anda. Anda hanya perlu memilih ukuran yang diinginkan dan secara opsional mengatur pengaturan tambahan.

Kunjungi generator tabel HTML DivTable.com untuk membuat kisi atau mengubahnya menjadi elemen div.

Sebagian besar penerbit web menggunakan editor HTML online yang memiliki pembuat tabel yang sangat berguna yang bekerja sangat mirip. Pilih menu Tabel untuk membuat tabel baru atau menyesuaikan tabel yang ada:

Layout Halaman Web Menggunakan Tabel HTML

Sebelum era desain web responsif, mereka menggunakan tabel HTML untuk membangun tata letak seluruh halaman. Praktik ini tidak lagi berfungsi karena pada perangkat seluler yang sempit berbagai bagian halaman perlu ditumpuk.

Kami akan membangun template seperti itu menggunakan tabel HTML untuk menunjukkan contoh yang sedikit lebih rumit.

< table  cellpadding = "20" > 
  < caption > Tutorial HTML </ caption > 
  < thead > 
    < tr > 
      < td > Logo </ td > 
      < td > Header </ td > 
      < td > Ikon </ td > 
    </ tr > 
  </ thead > 
  < tfoot > 
    < tr > 
      <td  colspan= "2" > Footer </ td > 
      < td > Kontak </ td > 
    </ tr > 
  </ tfoot > 
  < tbody > 
    < tr > 
      < td  colspan = "2" > Judul </ td > 
      < td  rowspan = " 2 " > Bilah Samping </ td > 
    </ tr > 
    < tr > 
      <td  colspan ="2" > 
        Konten < br /> 
        datang < br />
        sini
      </ td > 
    </ tr > 
  </ tbody > 
</ table >

Kode akan ditampilkan seperti ini di halaman (dengan sedikit gaya CSS).

Tutorial HTML

Logo	Header	Ikon
Footer		Kontak
Judul		Bilah samping
Konten  datang ke  sini

Anda dapat melihat tag dan atribut baru yang akan dijelaskan melalui contoh ini.

Keterangan

Keterangan adalah tag opsional yang ditampilkan di atas tabel dan harus dinyatakan segera setelah tag tabel pembuka. Hanya ada satu teks yang diberikan dan secara default akan disejajarkan di tengah tabel. Tampilan dasar dapat ditimpa dengan CSS .

Header

Kepala tabel dideklarasikan melalui tag thead . Ini bisa berguna ketika tabel membentang melalui banyak halaman dan Anda ingin menetapkan posisi tetap ke header

Tubuh

Bagian utama dari tabel di mana lebih banyak baris dapat ditambahkan dideklarasikan dengan tag tbody .

Footer

Footer akan di-render di bagian bawah tabel, meskipun itu terletak tepat setelah header di sumber.

Colspan dan Rowspan

Kita dapat mengatur sel untuk merentang melalui lebih dari satu sel secara horizontal atau vertikal mengatur parameter ini

Gunakan DIV sebagai gantinya

Saat ini di era situs web seluler, bagian-bagian situs web harus sesuai dengan layar sempit juga dan berbagai bagian halaman perlu ditumpuk, yang tidak mungkin dilakukan dengan tabel HTML.

Inilah sebabnya mengapa dianjurkan untuk menggunakan tag div daripada tabel dan gaya mereka sesuai. Pergi ke DivTable.com untuk mengonversi tabel yang ada ke elemen div. Alat online yang hebat ini akan membantu Anda membuat stylesheet untuk tabel div.