Belajar CSS Dasar : Design Table dengan CSS

 Setalah mempelajari tentang cara membuat tabel di HTML pada pembahasan yang lalu, pasti banyak di antara kita merasa tampilan dari tabel standar HTML tampilannya masih sangat kurang menarik. karena tampilan tabel standar dari HTML sendiri memiliki tampilan yang biasa saja. oleh karena itu Pada pembahasan belajar CSS design tabel ini akan di jelaskan tentang bagaimana cara design sebuah tabel HTML dengan menggunakan CSS.

Di tutorial ini saya akan menjelaskan cara men-design table step by step. pertama kita buat kerangka table nya dulu.

<!DOCTYPE html>

<html>

<head>

<title>Cara Design Table Dengan CSS</title>

</head>

<body>

<h1>Cara Design Table Dengan CSS</h1>

<table border="1">

<tr>

<th>No</th>

<th>Nama</th>

<th>Alamat</th>

<th>Usia</th>

</tr>

<tr>

<td>1</td>

<td>Andi Saputra</td>

<td>Magelang</td>

<td>21</td>

</tr>

<tr>

<td>2</td>

<td>Budi Budiman</td>

<td>Jakarta</td>

<td>24</td>

</tr>

<tr>

<td>3</td>

<td>Calvin Sanusi</td>

<td>Malang</td>

<td>29</td>

</tr>

<tr>

<td>4</td>

<td>Diki</td>

<td>Bandung</td>

<td>24</td>

</tr>

<tr>

<td>5</td>

<td>Malas Ngoding</td>

<td>Medan</td>

<td>23</td>

</tr>

</table>

</body>

</html>

dan tampilan nya masih standar dan biasa saja.


Seperti yang tampak pada gambar di atas. tampilan dari table kita masih sangat standar. sekarang kita akan langsung memulai mendesign table nya. buat sebuah file css dan langsung hubungkan dengan file html nya. baca tutorial sebelumnya tentangbelajar html menghubungkan html dan css.

<link rel="stylesheet" type="text/css" href="style.css">

Sehingga file html nya menjadi seperti berikut

index.html

<!DOCTYPE html>

<html>

<head>

<title>Cara Design Table Dengan CSS</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

style.css

/*design table 1*/ .table1 { font-family: sans-serif; color: #232323;

border-collapse: collapse; } .table1, th, td { border: 1px solid #999; padding: 8px 20px; } 

contoh di atas adalah membuat design table sederhana.hasilnya :



Komentar

Posting Komentar

Postingan populer dari blog ini

Bootstrap: Pengertian, Kegunaan, Kelebihan, dan Kekurangannya

Gambar
Apa Itu Bootstrap? Bootstrap adalah framework HTML, CSS, dan JavaScript yang berfungsi untuk mendesain website  responsive  dengan cepat dan mudah.  Framework open source ini diciptakan pada tahun 2011 oleh Mark Otto dan Jacob Thornton dari Twitter. Itulah kenapa dulunya Bootstrap dinamakan  Twitter Blueprint .  Bootstrap dengan cepat meraih popularitas digunakan oleh  27% website di seluruh dunia . Hal itu karena kesederhanaan dan konsistensi yang ditawarkan Bootstrap dibanding framework lainnya saat itu.  Kemudahan yang ditawarkan oleh Bootstrap adalah Anda tak perlu  coding  komponen website dari nol. Framework ini tersusun dari kumpulan file CSS dan JavaScript berbentuk  class  yang tinggal pakai.  Class  yang disediakan Bootstrap juga cukup lengkap. Mulai dari  class  untuk layout halaman,  class  menu navigasi,  class  animasi, dan masih banyak lainnya.  Menariknya lagi, Bootstrap bersifat responsive berkat  grid system   yang digunakan. Sistem grid pada bootstrap menggunakan ra
Baca selengkapnya

UML - STATEMACHINE DIAGRAM : PENGERTIAN SIMBOL DAN CONTOHNYA

Gambar
Pengertian State Machine Diagram Statemachine diagram adalah diagram UML yang memvisualisasikan sebuah transisi dan juga pergantian dari keadaan sebuah objek pada sistem. Perilaku suatu entitas tidak hanya merupakan konsekuensi langsung dari inputnya, tetapi juga tergantung pada keadaan sebelumnya. Sejarah masa lalu suatu entitas dapat dimodelkan dengan baik oleh diagram mesin keadaan terbatas atau secara tradisional disebut automata. UML State Machine Diagram (atau kadang-kadang disebut sebagai state diagram, state machine atau state chart) menunjukkan status yang berbeda dari suatu entitas. Diagram mesin keadaan juga dapat menunjukkan bagaimana suatu entitas merespons berbagai peristiwa dengan mengubah dari satu keadaan kekeadaan lainnya. State machine diagram adalah diagram UML yang digunakan untuk memodelkan sifat dinamis dari suatu sistem. Simbol State Machine Diagram Berikut ini adalah simbol state diagram: State : Digambarkan berbentuk segi empat dengan sudut membulat dan memili
Baca selengkapnya

UML - ACTIVITY DIAGRAM

Gambar
Halo teman-teman Kali ini kita akan membahas  salah satu jenis UML, yakni  activity  diagram.  Jika teman-teman belum mengetahui apa itu UML(Unified Modelling Language) langsung saja klik link berikut: www.dicoding.com/apa-itu-uml Pengertian Activity Diagram Activity  diagram,  dalam bahasa Indonesia diagram aktivitas, yaitu diagram yang dapat memodelkan proses-proses yang terjadi pada sebuah sistem. Runtutan proses dari suatu sistem digambarkan secara vertikal.  Activity  diagram  merupakan pengembangan dari  Use Case  yang memiliki alur aktivitas. Source picture from Wikipedia Diagram ini menggambarkan sebuah algoritma dan pemodelan sekuensial yang kompleks dengan proses paralel. Tujuan Activity Diagram Berikut beberapa tujuan dari  activity  diagram: Menjelaskan urutan aktivitas dalam suatu proses. Di dalam dunia bisnis biasanya digunakan untuk  modeling  (memperlihatkan urutan proses bisnis). Mudah dalam memahami proses yang ada dalam sistem secara keseluruhan. Merupakan metode per
Baca selengkapnya