Cara Membuat Tabel Hanya Menggunakan Tag dan CSS

” tag di dalamnya.

---

---

Contoh
Perhatikan contoh kode HTML berikut untuk membuat tabel:

< div kelas = 'meja div' >
< div kelas = 'baris tajuk' >
< div kelas = 'divCell' >< B > PENGENAL < / B >< / div >
< div kelas = 'divCell' >< B > Nama < / B >< / div >
< div kelas = 'divCell' >< B > Usia < / B >< / div >
< / div >
< div kelas = 'divRow' >
< div kelas = 'divCell' > 001 < / div >
< div kelas = 'divCell' > Smith < / div >
< div kelas = 'divCell' > 25 < / div >
< / div >
< div kelas = 'divRow' >
< div kelas = 'divCell' > 002 < / div >
< div kelas = 'divCell' > Yohanes < / div >
< div kelas = 'divCell' > 31 < / div >
< / div >
< div kelas = 'divRow' >
< div kelas = 'divCell' > 003 < / div >
< div kelas = 'divCell' > Charles < / div >
< div kelas = 'divCell' > 28 < / div >
< / div >
< / div >

Dalam cuplikan kode di atas:

• A '
  ” tag ditambahkan dengan kelas bernama “ divTable ”.
• Di dalam ' div ” elemen wadah, tambahkan lagi “ div ” elemen kontainer dengan kelas yang dideklarasikan sebagai “ headerRow ”.
• Sekali lagi, tambahkan tiga “ div ” elemen yang memiliki kelas bernama “ divRow ” dengan tiga sub kontainer dengan “ divCell ' kelas.
• Kemudian, tambahkan tiga elemen div tambahkan “ PENGENAL ”, “ Nama ' Dan ' Usia ” di baris tajuk tabel.
• Setelah itu, tentukan nilai untuk “ID”, “Name” dan “Age” untuk setiap elemen div.

Ini semua tentang bagaimana menggunakan ' div ” elemen untuk membuat tabel. Sekarang, mari terapkan properti CSS padanya:

---

---

.divTabel
{
tampilan: tabel;
lebar :mobil;
latar belakang- warna :#eee;
berbatasan :1px padat # 666666 ;
border-spacing:5px;
}
.divRow
{
lebar :mobil;
tampilan:tabel-baris;
}
.divCell
{
lebar :150px;
mengambang: kiri;
tampilan: kolom-tabel;
latar belakang- warna : rgb ( 212 , 209 , 209 ) ;
}

Dalam elemen gaya CSS di atas:

• Tambahkan pemilih yang mengacu pada “ divTable ” (yang berisi semua nilai tabel) dan tentukan properti CSS yang diinginkan (mis., “ menampilkan ”, “ lebar ”, “ warna latar belakang ”, “ berbatasan ' Dan ' spasi perbatasan ”) untuk konten tabel.
• Setelah itu, tambahkan pemilih kelas yang memilih elemen “ divRow ' kelas untuk menambahkan CSS ' lebar ' Dan ' menampilkan ” properti untuk elemen.
• Terakhir, tambahkan properti gaya CSS ke elemen di “ .divCell ”pemilih kelas.

Ini akan membuat tabel di output dan akan menampilkan hasil berikut:

Itu semua tentang membuat tabel dalam HTML hanya menggunakan tag