Penerapan HTML (Part 7)

I.Latar Belakang.

Latar belakang kali ini kita masih mengenal sintag tentang HTML apa saja yang di butuhkan untuk membuat web dasar

II.Alat dan Bahan.
    Laptop / PC
    W3SCHOOLS
    Sublime text


III.Tujuan.

 untuk mengetahui langkah dasar untuk membuat web yang sederhana.

IV.Penjelasan.

Tabel HTML.

Mendefinisikan Tabel HTML.

Contoh :

Maka outputnya :

 Contoh menjelaskan

Tabel didefinisikan dengan tag <table>.
Tabel dibagi menjadi baris tabel dengan tag <tr>.
Baris tabel dibagi menjadi data tabel dengan <td> tag.
Sebuah baris tabel juga dapat dibagi menjadi judul tabel dengan <th> tag.

data tabel <td> adalah wadah data tabel.
Mereka dapat berisi segala macam elemen HTML seperti teks, gambar, daftar, tabel lain, dll

 Sebuah Tabel HTML dengan Atribut PerbatasanJika Anda tidak menentukan perbatasan untuk meja, itu akan ditampilkan tanpa batas.
Sebuah perbatasan dapat ditambahkan dengan menggunakan atribut border


Contoh :

 Maka outputnya :

 Atribut perbatasan adalah pada jalan keluar dari standar HTML! Hal ini lebih baik menggunakan CSS.

Untuk menambahkan perbatasan, menggunakan properti perbatasan CSS

Contoh :

Maka outputnya :

Ingatlah untuk menentukan batas-batas untuk kedua tabel dan sel tabel.

Sebuah Tabel HTML dengan Borders diciutkan

Jika Anda ingin perbatasan runtuh ke dalam satu perbatasan, tambahkan CSS border-collapse

Maka outputnya :

Sebuah Tabel HTML dengan sel Padding
Sel Padding menentukan jarak antara isi sel dan perbatasannya.
Jika Anda tidak menentukan bantalan, sel-sel tabel akan ditampilkan tanpa padding.
Untuk mengatur padding, menggunakan properti CSS padding

Contoh :

Maka outpunya :

HTML Tabel Pos

judul tabel didefinisikan dengan tag <th>.
Secara default, semua browser utama menampilkan judul tabel sebagai berani dan berpusat

Contoh :

Maka outputnya :

Untuk kiri menyelaraskan judul tabel, menggunakan properti text-align CSS

Contoh :

Maka outputnya :

Sebuah Tabel HTML dengan Spasi Perbatasan
spasi perbatasan menentukan jarak antara sel-sel.
Untuk mengatur jarak perbatasan untuk meja, menggunakan properti CSS border-spacing

Contoh :

Maka outputnya :

Jika tabel telah runtuh perbatasan, perbatasan-jarak tidak berpengaruh.

Tabel Sel yang span Banyak Kolom
Untuk membuat rentang sel lebih dari satu kolom, menggunakan atribut colspan.

Contoh :

Maka outputnya :

 Sebuah Table HTML Dengan Caption
Untuk menambahkan keterangan ke meja, gunakan <caption> tag

Contoh :

 Maka outputnya :

 
<Caption> tag harus dimasukkan segera setelah <table> tag.

Gaya khusus untuk satu Table
Untuk menentukan gaya khusus untuk  khusus, menambahkan atribut id ke table

Contoh :
 

Maka outputnya :

Rangkuman Bab

•     Gunakan HTML <table> elemen untuk mendefinisikan tabel
•     Gunakan HTML <tr> elemen untuk menentukan baris tabel
•     Gunakan HTML <td> elemen untuk menentukan data tabel
•     Gunakan HTML <th> elemen untuk mendefinisikan meja pos
•     Gunakan HTML <caption> elemen untuk mendefinisikan judul tabel
•     Menggunakan properti perbatasan CSS untuk menentukan perbatasan
•     Menggunakan properti CSS border-collapse runtuh batas sel
•     Menggunakan properti CSS padding untuk menambahkan padding untuk sel
•     Menggunakan properti CSS text-align menyelaraskan teks sel
•     Menggunakan properti CSS border-spacing untuk mengatur jarak antara sel-sel
•     Menggunakan atribut colspan untuk membuat rentang sel banyak kolom
•     Menggunakan atribut rowspan untuk membuat rentang sel banyak baris
•     Menggunakan atribut id untuk mendefinisikan unik satu meja

HTML Table Tag
          tag                             Deskripsi

• <Table> Mendefinisikan meja
• <Th> Mendefinisikan sebuah header cell dalam sebuah tabel
• <Tr> Mendefinisikan baris dalam sebuah tabel
• <Td> Mendefinisikan sebuah sel dalam tabel
• <Caption> Mendefinisikan sebuah caption tabel
• <Colgroup> Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat
• <Col> Menentukan sifat kolom untuk setiap kolom dalam <colgroup> elemen
• <Thead> Grup isi header dalam sebuah tabel
• <Tbody> Grup isi tubuh dalam sebuah tabel
• <Tfoot> Grup isi footer dalam sebuah tabel

V.Kesimpulan.

dapat kita simpulkan bahwa trik trik dasar itu harus kita pelajari agar kita dapat membuat suatu web sederhana yang maximal.

VI.Refrensi.

    http://www.w3schools.com/html