Showing posts with label Tutorial HTML5. Show all posts
Showing posts with label Tutorial HTML5. Show all posts

HTML 5 - Teks akhir jadi lebih besar

Kalau kita ingin membuat tabel anggaran biaya. Biasanya teks yang akhir ditulis pada baris terakhir akan tampak lebih besar dibandingkan dengan teks lainnya. Wajar saja kalau teks akhir biasanya total atau jumlah anggaran.
Nah bagaimana caranya menebalkan teks pada baris terakhir? Kita bisa menebalkan secara manual menggunakan tag HTML, akan tetapi kalau kit ingin menggunakan css, maka kita bisa menuliskan atau menambahkan kode berikut:

tr:last-child{
    font-weight:bolder;
    font-size:24px;
}

Itu artinya, teks yang ada di table row (baris tabel) terakhir akan dibuat lebih tebal menggunakan font-weight dengan ukuran teks sebesar 24px menggunakan font-size.

Berikut script selengkapnya bisa didownload DISINI

HTML 5, Membuat Tabel Belang

Pada tutorial kali ini saya akan berbagi mengenai pembuatan tabel belang-belang abu-abu gelap seperti gambar disamping itu tidaklah sulit. Dengan menggunakan sedikit code css, maka setiap sel dengan warna yang berbeda dan dalam waktu yang relatif singkat.
Oleh karena itu pada tutorial html berikut ini, akan dibuatkan css style untuk mengotomasisasikan proses pemberian warna abu-abu muda dan abu-abu tua seperti pada gambar diatas.
Untuk melakukan hal tersebut, maka teman-teman blogger khususnya teman-teman blogger Indonesia bisa menggunakan nth-of-type selector. Coba perhatikan potongan script dibawah ini:

tr:nth-of-type(even){
    background-color:#f3f3f3;
}
tr:nth-of-type(odd){
    background-color:#ddd;
}

Langkah awal, selector tersebut saya tuliskan paada tag <tr> yang merupakan tag pembuat baris tabel (tabel row). Selanjutnya, ada nilai even yang berarti genap serta odd yang berarti ganjil. Untuk baris-baris dalam urutan genap, maka akan digunakan warna abu-abu terang. Sedangkan baris-baris dalam urutan ganjil akan digunakan warna abu-abu gelap penggunaan warna untuk baris-baris tabel itu menggunakan background-color. 

Berikut script selengkapnya bisa didownload DISINI

Entri Populer

Kontak Saya

HP/WA : 08562616116

Total Pageviews

Teman-Teman Blogger

Ilmu Desain Grafis Copyright © 2009 Community is Designed by Bie | development by Muryan Awaludin