Tabel HTML

OK OK sekarang giliran ane nih ngupas HTML, kali ini ane kebagian ngupas Tabel HTML, List-list HTML, Blok-blok HTML, dan Kelas-kelas HTML.

OK langsung aja yak, kita ke bahasan pertama, yaitu Tabel-tabel HTML..

udah pada tau kan bentuk tabel bijimane??
nih ane kasih tau kalo ada yg belum ngerti bijimane bentuk tabel :D (lol)

Contoh tabel

Jadi gini broh ceritanyee...
Di html ntu penulisan tabel dibagi menjadi empat bagian, 

• memulai table pake tag <table> </table>
• terus nih di dalam tabel kan tentunye ada baris, disebutnye table row, pake tag <tr> </tr>
• terus juga ada yg dinamain table data, kata lainnya ntu isi dari table, pake tag <td> </td>   
•  ada juga yg dinamain table heading alias judulnye, nulisnye pake tag <th> </th> 

Atribute Border 

Contoh tabel di atas ntu contoh darti tabel yang ga pake atribute border. berikut ane kasih contoh tabel yang make atribute border.

Atribute border

Contoh table dengan atribute border

 
Seperti biasa, HTML di percantik dengan CSS, berikut kalo tabel kita bikin tambah cantik pake CSS di dalemnye..

CSS border

Contoh tabel dengan CSS border

Collapsed Border

Collapsed Border ini fungsinye kalo kita pengen bikin tabel dengan satu garis aje. biar kaga bingung, langsung aja perhatiin contoh di bawah dan bandingin sama contoh sebelumnye.

Collapsed border

Contoh tabel dengan collapsed border

Tabel dengan Cell Padding

Apa sih cell padding? Cell padding ntu fungsinya ngasih jarak antara baris dengan isi cell.
langsung aja dah liat contohnya..

Cell padding ditulis di CSS

Tampilan tabel dengan cell padding

Tabel Heading

Seperti yg udeh di bahas tadi noh di awal, kalo tabel heading tu judul dari tiap kolom. kalo di contoh sih berarti tabel headingnya ntu Hari, Matakuliah, sama Waktu.
 tag nya make <th> </th>
Oya, secara default nih, si table heading ini bakal tampil dengan tulisan lebih tebel dan otomatis di tengah.

Nah untuk masbroh dan mbabroh yang mau dan pengen si tabel heading ini kaga ditengah, kita bisa make properti CSS text-align untuk ngatur posisi si tabel heading. contohnye kaya di bawah ini yak..

Tampilan tabel heading rata kiri

Tabel dengan properti Border Spacing

Fungsinya ntu bikin jarak antar cell nya, bingung? liat aja dah langsung contohnye..

Tampilan tabel dengan properti border spacing

Colspan

Apa sih colspan itu? colspan ini dipake buat nyatuin dua kolom jadi satu kolom. contohnya mane? liat dibawah yakk hehehe

Colspan 2 kolom

Tampilan colspan 2 kolom

Rowspan

beda dikit lah sama tadi, colspan. kalo rowspan gabungin dua baris jadi satu baris.
langsung aja ke contooohhh.... hahahaa

rowspan 2 baris

Tampilan rowspan 2 bari menjadi 1

Caption Table

pasti udah paham kan, sesuai namanya, caption table berarti judul tabel yak...

Caption table

Tampilan caption table "Jadwal Kuliah Semester 3"

Atribute ID pada tabel

Selanjutnya kita bakal bahas  id pada tabel. sama kok kaya id - id lainya.
nih contohnya..

id table#01

Tabel tanpa id dan tabel dengan id

bisa juga ditambah lagi sesukamuu...

Sekian bahasan Tabel HTML nya..
Lanjut ke bahasan List-list HTML, Blok-blok HTML, dan Kelas-kelas HTML ya...


Re
Fatkhurrokhman Sidiq - PROJECT X