Penerapan CSS pada Elemen Tabel

Assalamualaikum wr.wb

Pada kesempatan kali ini kita akan membahas tentang Penerapan CSS pada Elemen Tabel
Silahkan teman - teman simak pembahasan dibawah ini!

Tabel adalah data data yang berisikan iktisar sejumlah data data informasi, biasanya dapat berupa kata - kata dan bilangan yang tersusun urut ke bawah dalam suatu lajur dan deret tertentu dengan garis pembatas sehingga mudah untuk disimak atau dipahami. Untuk mengatur tampilan tabel di halaman website dibutuhkan CSS agar tampilan terlihat lebih menarik. Dengan menggunakan CSS dapat mengatur style sebuah tabel agar dapat terlihat cantik dan menarik. Tersedia beberapa property untuk mengatur tampilan table diantaranya mengatur border, warna background, warna teks, margin dan mengatur lebah serta tinggi kolom pada tabel.

Tujuan

  • Dapat memahami style style dasar CSS untuk memformat tampilan tabel
  • Dapat menerapkan beberapa style untuk memformat tampilan tabel
  • Dapat Menyajikan CSS untuk memformat tampilan pada tabel dari sebuah halaman website
Setelah membaca poin - poin diatas, sekarang kita mulai pada tahap pembahasan

Konsep Dasar Model Box
Konsep ini pada dasarnya adalah sebuah elemen dari HTML adalah model box. istilah model box ini digunakan pada saat membahas desain dan tampilan layout. Model box ini memungkinkan untuk membuat border disekeliling elemen dan space elemen elemen yang saling berhubungan. Model box pada elemen HTML dapat digambarkan sebagai berikut:
Pengaturan Border Tabel
Pengaturan CSS ini dapat digunakan untuk memformat border atai suatu garis tepi dari sebuah tabel. Format yang dapat dilakukan meliputi suatu genis garis (dotted, solid, dan lain lain), bisa juga mengatur warna border, ketebalan garis tepi dan sebagainya. Demikian pula warna dari sebuah sel, dapat diatur dengan menggunakan CSS.

Border Pada Bagian Tertentu
Pada saat kita memberikan style border {border:1px solid black;} Hal ini berarti seluruh border akan terkena efek 1px solid black; baik itu bagian atas (top), bagian bawah (bottom), bagian kiri(left), bagian kanan (right).

Mengatur Lebar dan Tinggi Border
Untuk mengatur lebar dan tinggi dari border kita dapat menggunakan property width dan height.

Pengaturan Text Align pada tabel
Untuk pengaturan teks dalam tabel, kita dapat menggunakan property text-align dan vertical-align.

Pengaturan Padding Pada Tabel
Pengaturan padding adalah jarak antara isi atau content, berupa sebuah teks atau gambar dengan batas dalam dari sel tersebut.

Pengaturan Warna Pada Tabel
Pewarnaan pada tabel dapat kita gunakan untuk mengatur warna pada teks, background ataupun border.

Setelah teman teman membaca pembahasan diatas, silahkan teman teman simak percoban percobaan dibawah ini

Langkah Kerja

  1. Silahkan buat folder di drive D:, dengan nama folder nama anda sendiri. Misal: prakweb_nama
  2. Buatlah subfolder praktikum4 didalam sebuah folder yang telah kalian buat sebelumnya
  3. Silahkan buka aplikasi tekx editor kalian seperti notepad++, sublime teks, dan lain lain
  4. Selanjutnya simpan elemen elemen struktur HTML tersebut dalam format .html dan file css dengan ektensi .css
  5. Langkah terakhir jalankan masing masing contoh elemen struktur HTML tersebut dengan menggunakan web browser.   
Silahkan teman - teman simak percobaan dibawah ini!
Buatlah halaman web sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Tabel Border</title>
<style type="text/css">
table, th, td{
border:solid blue 1px;
}
.dot{
border: dotted black 1px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nama Barang</th>
<th>Harga</th>
<th>Jumlah</th>
</tr>
<tr>
<td>Mouse</td>
<td>50000</td>
<td>5</td>
</tr>
</table>
<br>
<table class="dot">
<tr class="dot">
<th class="dot">Nama</th>
<th class="dot">Alamat</th>
</tr>
<tr class="dot">
<td class="dot">Alfa</td>
<td class="dot">Bandung</td>
</tr>
</table>
</body>
</html>
Silahkan simpan file tersebut dengan nama border.html
jika penulisannya benar maka akan seperti gambar berikut dibawah ini:
 Pada contoh diatas dapat kita lihat bahwa border yang dihasilkan ada dua garis. Bila kita ingin membuat border dengan satu garis maka kita dapat menggunakan properti border-collapse.
contoh untuk penulisannya: table {border-collapse: collapse;}
Maka table yang dihasilkan akan seperti berikut:
Silahkan buat halaman website sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Border Tertentu</title>
<style type="text/css">
table, th, td{
border-top: solid 3px black;
border-right: solid 3px red;
border-left: solid 3px blue;
border-bottom: solid 3px green;
}
</style>
</head>
<body>
<table>
<tr>
<th>CEO</th>
<th>Company</th>
</tr>
<tr>
<td>Mark Zuckerberg</td>
<td>Facebook</td>
</tr>
<tr>
<td>Bill Gates</td>
<td>Microsoft</td>
</tr>
<tr>
<td>Yang Yuanqing</td>
<td>Lenovo</td>
</tr>
</table>
</body>
</html>
 Silahkan simpan file tersebut dengan nama border2.html
hasilnya:
Buatlah halaman website sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Ukuran Tabel</title>
<style type="text/css">
table, td, th{
border: solid 1px black;
}
table{
width: 100%;
}
th{
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Kode Buku</th>
<th>Judul Buku</th>
</tr>
<tr>
<td>B001</td>
<td>Jaringan dasar</td>
</tr>
<tr>
<td>B002</td>
<td>Pemrograman Dasar</td>
</tr>
<tr>
<td>B003</td>
<td>Pemrograman Web</td>
</tr>
<tr>
<td>B004</td>
<td>Simulasi Digital</td>
</tr>
</table>
</body>
</html>
Silahkan simpan file tersebut dengan nama ukuran.html
Hasilnya:
 Buatlah halaman website sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Ukuran Tabel</title>
<style type="text/css">
table, td, th{
border: solid 1px black;
}
table{
width: 50%;
}
th, td{
height: 50px;
text-align: center;
vertical-align: center;
}
td.bawah{
vertical-align: bottom;
}
</style>
</head>
<body>
<table>
<tr>
<th>Kode Buku</th>
<th>Judul Buku</th>
</tr>
<tr>
<td>B001</td>
<td>Jaringan dasar</td>
</tr>
<tr>
<td>B002</td>
<td>Pemrograman Dasar</td>
</tr>
<tr>
<td>B003</td>
<td>Pemrograman Web</td>
</tr>
<tr>
<td class="bawah">B004</td>
<td class="bawah">Simulasi Digital</td>
</tr>
</table>
</body>
</html>
Silahkan simpan file tersebut dengan nama align.html
Hasilnya:

Silahkan buat halaman website sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Ukuran Tabel</title>
<style type="text/css">
table, td, th{
border: solid 1px black;
}
table{
width: 50%;
}
th, td{
padding-top: 15px;
padding-left: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Kode Buku</th>
<th>Judul Buku</th>
</tr>
<tr>
<td>B001</td>
<td>Jaringan dasar</td>
</tr>
<tr>
<td>B002</td>
<td>Pemrograman Dasar</td>
</tr>
<tr>
<td>B003</td>
<td>Pemrograman Web</td>
</tr>
<tr>
<td>B004</td>
<td>Simulasi Digital</td>
</tr>
</table>
</body>
</html>
Silahkan simpan dengan nama padding.html
Hasilnya:
 Silahkan buat halaman website sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Warna</title>
<style type="text/css">
table, td, th{
border: solid 1px black;
}
table{
width: 50%;
}
th, td{
text-align: center;
}
th{
background-color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Kode Buku</th>
<th>Judul Buku</th>
</tr>
<tr>
<td>B001</td>
<td>Jaringan dasar</td>
</tr>
<tr>
<td>B002</td>
<td>Pemrograman Dasar</td>
</tr>
<tr>
<td>B003</td>
<td>Pemrograman Web</td>
</tr>
<tr>
<td>B004</td>
<td>Simulasi Digital</td>
</tr>
</table>
</body>
</html>
Silahkan simpan file tersebut dengan nama warna.html
Hasilnya:
 Nah contoh terakhir kita akan membuat selang seling warna pada tabel.... silahkan ikuti script berikut!
<!DOCTYPE html>
<html>
<head>
<title>Warna</title>
<style type="text/css">
table, td, th{
border: solid 1px blue;
}
table{
width: 50%;
}
th, td{
text-align: center;
}
th{
background-color: blue;
}
td.back{
background-color: lightblue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Kode Buku</th>
<th>Judul Buku</th>
</tr>
<tr>
<td class="back">B001</td>
<td>Jaringan dasar</td>
</tr>
<tr>
<td>B002</td>
<td class="back">Pemrograman Dasar</td>
</tr>
<tr>
<td class="back">B003</td>
<td>Pemrograman Web</td>
</tr>
<tr>
<td>B004</td>
<td class="back">Simulasi Digital</td>
</tr>
</table>
</body>
</html>
Silahkan simpan dengan nama warna2.html
Hasilnya:
Nah itulah beberapa contoh Penerapan CSS pada Elemen Tabel.
Semoga bermanfaat :)

0 Response to "Penerapan CSS pada Elemen Tabel"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel