Seperti yang telah saya sampaikan di materi sebelumnya, materi belajar css kali ini membahas tentang belajar CSS table. Tabel yang terlihat biasa saja jika dibuat menggunakan html, akan terlihat lebih bagus dan meriah apabila menggunakan css. Tabel berguna sekali untuk memuat data agar terlihat lebih rapi. Untuk mengaplikasikan table dalam css, kita menggunakan table property. Contoh dibawah ini table menggunakan garis luar hitam, serta elemen th dan td
1
2
3
4
5
6
7
| table, th, td{border: 1px solid black;} |
Okey, berikut ini property umum yang sering digunakan dalam table.
Border – Colaps , property ini digunakan untuk memformat tampilan border menjadi single atau double line.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| table{border-collapse:collapse;}table,th, td{border: 1px solid black;} |
Border – Spacing, property ini digunakan untuk mengatur jarak spasi antara border dengan isi cell.
1
2
3
4
5
6
7
| td{padding:15px;} |
Tabel text algiment , mengatur text dalam table. Untuk horizontal mengatur teks kanan, kiri atau tengah
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| td{text-align:right;}Sedangkan untuk texs align vertical mengatur teks keatas, bawah :td{height:50px;vertical-align:bottom;} |
Table – Color, digunakan untuk mengatur warna dar border, teks maupun background
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| table, td, th{border:1px solid green;}th{background-color:green;color:white;} |
Nah, dengan berakhirnya materi CSS table ini maka berakhir juga materi belajar macam-macam style pada css. Sekedar untuk mereview, kita telah belajardasar-dasar css dan juga style css. Saya yakin, anda sudah bisa bereksperimen dengan skrip-skrip css. Materi belajar css selanjutnya adalah mengatur model box atau kotak dalam css. Nantikan artikel-artikel kami selanjutnya!
0 comments:
Post a Comment