Langsung ke konten utama

Belajar CSS chapter 5 (Tabel)


Assalamualaikum wr wb
Pada postingan kali ini saya akan berbagi mengenai CSS yang digunakan untuk Mengubah tampilan tabel menjadi lebih menarik lagi. Berikut tutorialnya. Selamat membaca.

Table

1.    Table Border

Untuk memberikan border pada tabel kita dapat menggunakan properti border. Contoh :
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
table, th, td
{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr><th>zzzz</th></tr>
<tr><td>qwer</td></tr>
</table>
</body>
</html>

Maka hasilnya :


2.    Collapse Border

Properti border-collapse digunakan untuk mengatur border pada tabel menjadi melipat dalam satu border atau terpisah. Contoh :
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
table
{
border-collapse:collapse;
}
table, th, td
{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr><th>zzzz</th></tr>
<tr><td>qwer</td></tr>
</table>
</body>
</html>

Hasilnya :

3. Tinggi dan Lebar Tabel

Untuk mengatur tinggi dan lebar tabel dapat menggunakan properti height dan width. Contoh :
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
table
{
width:100%;
}
th
{
height:50px;
}
table, th, td
{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr><th>zzzz</th></tr>
<tr><td>qwer</td></tr>
</table>
</body>
</html>

Hasilnya :

4. Perataan teks pada tabel

Perataan teks pada table dapat menggunakan properti text-align dan vertical-align. Contoh :
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
table
{
width:100%;
}
th
{
height:50px;
}
td
{
text-align:right;
}
table, th, td
{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr><th>zzzz</th></tr>
<tr><td>qwer</td></tr>
</table>
</body>
</html>

Hasilnya :
Contoh lain :
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
table
{
width:100%;
}
th
{
height:50px;
}
td
{
height:50px;
vertical-align:bottom;
}
table, th, td
{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr><th>zzzz</th></tr>
<tr><td>qwer</td></tr>
</table>
</body>
</html>

Hasilnya :

5.    Table padding

Untuk mengontrol jarak diantara border dan konten dapat menggunakan properti padding. Contoh :
<!DOCTYPE html>
<html>
<head>

<style type=”text/css”>
table
{
width:100%;
}
th
{
height:50px;
}
td
{
padding:15px;
}
table, th, td
{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr><th>zzzz</th></tr>
<tr><td>qwer</td></tr>
</table>
</body>
</html>

Hasilnya :

6.    Mewarnai Tabel

Untuk mewarnai tabel dapat menggunakan properti color untuk teks dan background-color untuk latar belakang. Contoh :
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>
</head>
<body>
<table>
<tr><th>zzzz</th></tr>
<tr><td>qwer</td></tr>
</table>
</body>
</html>

Hasilnya :
Sekian untuk pembahasan kali ini.
Wassalamualaikum wr wb.
Sumber : w3schools.com

Komentar

Postingan populer dari blog ini

Soal Pilihan Ganda Variabel, Konstanta, Operator dan Ekspresi Pemrograman C++

1.double angka; . kode program disamping merupakan tipe data… [C3] a.Bilangan bulat b.Bilangan riil c.Logika d.Karakter e.Struktur      2.Dibawah merupakan tipe data bilangan bulat adalah… [C1] a.char b.double c.float d.int e.boolean      3.Tipe data bahasa C++ untuk true false adalah… [C1] a.String b.Char c.Boolean d.Byte

Penilaian (Definisi, Prinsip dan Tujuan)

Definisi Penilaian Penilaian adalah proses pengumpulan dan pengolahan informasi untuk menentukan pencapaian hasil belajar peserta didik (Saputra, Salikun, & Nugroho, 2014, hlm.31).
Penilaian adalah proses pengumpulan berbagai informasi tentang siswa dan ruang kelas untuk tujuan membuat keputusan instruksional (Sapa’at, 2012. hlm.221).
Dengan dilakukannya penilaian di dalam kelas dapat menjawab pertanyaan tentang sebaik apa hasil atau prestasi belajar peserta didik. Hasil penilaian dapat berupa nilai kualitatif (berupa kata-kata) dan nilai kuantitatif (berupa angka).
Proses pengumpulan dan pengolahan informasi tersebut dilakukan untuk mengukur pencapaian hasil belajar peserta didik. Proses penilaian tersebut mencakup: penilaian otentik, penilaian diri, penilaian berbasis portofolio, ulangan, ulangan harian, ulangan tengah semester, ulangan akhir semester, ujian tingkat kompetensi, ujian mutu tingkat kompetensi, ujian nasional, dan ujian sekolah/ madrasah. (Permendikbud No.66 Tahun …

Bagaimana Cara Kerja Kapasitor

Sebuah kapasitor bentuknya kecil seperti sebuah baterai. Walaupun kapasitor bekerja dengan cara yang sangat berbeda, kapasitor dan baterai keduanya menyimpan energi listrik. Jika kamu pernah membaca bagaimana cara kerja baterai, maka kamu tahu bahwa sebuah baterai memiliki dua buah terminal. Di dalam sebuah baterai, reaksi kimia menghasilkan elektron-elektron pada ujung satu terminal and menyerap elektron-elektron pada terminal lainnya. Sebuah kapasitor jauh lebih sederhana di bandingkan sebuah baterai, kapasitor tidak dapat menghasilkan elektron-elektron baru -- kapasitor hanya menyimpan elektron-elektron.

Di dalam kapasitor, terminal-terminalnya tersambung ke dua plat logam yang dipisahkan oleh sebuah bahan bukan penghantar listrik, atau dielektrik. Kamu dapat dengan mudah membuat sebuah kapasitor dari dua buah aluminum foil dan satu buah kertas. Itu tidak akan menjadi sebuah kapasitor pada umumnya dalam hal kapasitas penyimpanan, tapi itu akan bekerja.

Secara teori, dielektrik ada…