Ad Code

Penerapan CSS pada elemen tabel

)  Konsep dasar model box
Pada dasarnya elemen dari HTML adalah model box. Istilah model box ini digunakan pada saat membahas desain dan layout. Model box memungkinkan untuk membuat border disekeliling elemen dan space elemen yang saling berhubungan. Model box pada elemen HTML dapat digambar sebagai berikut :
Gambar  6.1  konsep model box

Keterangan gambar
Margin
Daerah paling diluar yang membatasi dengan elemen HTML yang lainnya dan tidak berwarna
Border
Border mengelilingi padding dan content. Garis yang mempunyai warna dan ketebalan
Padding
Area yang mengelilingi content. Warna padding dipengaruhu oleh background dari box
Content
Isi dari box, bisa berupa teks maupun gambar

Ketika menentukan width dan height dari properti elemen dengan menerapkan CSS, sebenarnya itu hanya mendefiniskan area content saja sehingga jika menginginkan keseluruhan eleme box maka harus diperhitungkan juga margin-border-padding

2)  Pengaturan border tabel
CSS dapat digunakan untuk memformat border atau garis tepi dari sebuah tabel. Format yang dapat dilakukan meliputi  jenis garis (dotted, solid, dan lain-lain), warna border, ketebalan garis tepi dan sebagainya. Demikian pula warna dari sebuah sel, dapat diatur dengan CSS.

Berikut adalah contoh penerapan style border pada tabel dengan style sebagai berikut  {border:1px solid black;} dan listing kode lengkapnya seperti dibawah ini

<html>
<head>
<style>
table,th,td
{ border:1px solid black; }
</style>
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama</th>
</tr>
<tr>
<td>Adelin</td>
<td>Larasati</td>
</tr>
<tr>
<td>Novero</td>
<td>Dayandra</td>
</tr>
<tr>
<td>Adika</td>
<td>Dayandra</td>
</tr>
</table>
</body>
</html>

Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :
Gambar  6.2 penerapan style border pada tabel

Berikut ini contoh pengaturan property

 border-collapse:collapse;

yang menghasilkan tampilan garis single pada tabel

<html>
<head>
<style>
table
{ border-collapse:collapse; }
table, td, th
{ border:1px solid black; }
</style>
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama</th>
</tr>
<tr>
<td>Adelin</td>
<td>Larasati</td>
</tr>
<tr>
<td>Novero</td>
<td>Dayandra</td>
</tr>
<tr>
<td>Adika</td>
<td>Dayandra</td>
</tr>
</table>
</body>
</html>
Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :
Gambar  6.3 penerapan style border-collapse pada tabel

Pada saat memberikan style border à  {border:1px solid black;}
Hal ini berarti seluruh border akan efek terkena 1px solid black; baik bagian atas (top),bagian bawah(bottom), bagian kiri(left) ataupun kanan (right). Border dapat dikenai style untuk area tertentu saja karena border dapat diseting untuk border bawah atas kanan dan kiri seperti pada style berikut :

<style>
table,th,td
{ border-top: 2px solid red;
  border-right: 2px solid green;
  border-left: 2px solid blue;
  border-bottom: 2px solid #DD4A04; }
</style>

3)  Pengaturan lebar dan tinggi tabel
Lebar dan tinggi dari sebuah tabel didefinisikan dalam property width dan height Contoh berikut ini mengatur lebar tabel 100% dan tinggi dari elemen th adalah
50px.

table
{width:100%; }
th
{ height:50px; }

Berikut ini penerapan style width dan height dalam sebuah tabel
<html>
<head>
<style>
table,td,th
{ border:1px solid black; }
table
{ width:100%; }
th
{ height:50px; }
</style>
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama</th>
</tr>
<tr>
<td>Adelin</td>
<td>Larasati</td>
</tr>
<tr>
<td>Novero</td>
<td>Dayandra</td>
</tr>
<tr>
<td>Adika</td>
<td>Dayandra</td>
</tr>
</table>
</body>
</html>

Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :
Gambar 6.4 penerapan style width dan height pada tabel

4)  Pengaturan text-align pada tabel
Teks dalam tabel diatur  dengan properti.text-align dan vertical-align . Nilai dari properti text-align untuk horizontal alignment adalah left, right, atau center.

Td
{ text-align:right; }

Nilai dari properti text-align untuk horizontal alignment adalah top, bottom, or middle.
Td
{ height:50px;vertical-align:bottom; }

Berikut ini penerapan style text-align dalam sebuah tabel, dimana teks diatur dengan posisi rata kanan

<html>
<head>
<style>
table,td,th
{ border:1px solid black; }
td
{ <body> text-align:right;height:50px;
vertical-align:bottom;}
</style>
</head>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama</th>
</tr>
<tr>
<td>Adelin</td>
<td>Larasati</td>
</tr>
<tr>
<td>Novero</td>
<td>Dayandra</td>
</tr>
<tr>
<td>Adika</td>
<td>Dayandra</td>
</tr>
</table>
</body>
</html>

Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :
Gambar  6.5  penerapan style text-align pada tabel

5)  Pengaturan padding tabel
Padding adalah jarak antara isi atau content, berupa teks ataupun gambar dengan batas dalam dari sel tersebut. Style padding ini dapat diterapkan pada elemen HTML <td> (kolom).  Ukuran yang digunakan dapat berupa cm, atau px (piksel). Property style untuk pengaturan padding yang mengelilingi content adalah td{ padding:15px; }
Padding dapat pula diatur untuk bagian tertentu saja, misalnya adalah :
-    padding-top jarak dari atas sel
-    padding-bottom jarak dari bawah sel
-    padding-left jarak dari kiri sel
-    padding-right jarak dari kanan sel.
 Berikut ini adalah beberapa contoh penggunaan style padding pada tabel :
<html>
<head>
<style>
table,td,th
{ border:1px solid black; }
td
{ text-align:right;height:50px;vertical-align:bottom;
padding:15px; }
</style>
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama</th>
</td>
</tr>
<tr>
<td>Novero</td>
<td>Dayand</tr>
<tr>
<td>Adelin</td>
<td>Larasati ra</td>
</tr>
<tr>
<td>Adika</td>
<td>Dayandra</td>
</tr>
</table>
</body>
</html>

listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :
Gambar  6.6 penerapan style padding pada tabel
Jika menginginkan padding diarea tertentu saja, misalnya padding untuk area kanan maka dapat diterap padding-right
<html>
<head>
<style>
table,td,th
{ border:1px solid black; }
td
{ text-align:right;height:50px;vertical-align:bottom;
padding-right: 70px; }
</style>
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama</th>
</tr>
<tr>
<td>Adelin</td>
<td>Larasati</td>
</tr>
<tr>
<td>Novero</td>
<td>Dayandra</td>
</tr>
<tr>
<td>Adika</td>
<td>Dayandra</td>
</tr>
</table>
</body>
</html
Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :
Gambar  6.7  penerapan style padding-right pada tabel
6)  Pengaturan warna pada table
Pewarnaan pada tabel dapat digunakan untuk mengatur warna pada teks,background maupun border.
table, td, th
{ border:1px solid green; }
Style diatas akan memberikan efek warna green pada border table,data (td) dan header tabel (th). Style warna juga bisa diberikan hanya pada bagian tertentu saja, misalnya bagian header tabel (th) seperti pada listing css dibawah
Th
{ background-color:green;
color:white; }
Header tabel akan berwarna green dan teksnya berwarna putih. Penerapan style diatas pada sebuah tabel akan terlihat pada contoh berikut :

<html>
<head>
<style>
table, td, th
{ border:1px solid green; }
th
{ background-color:green;color:white;}
</style>
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama</th>
</tr>
<tr>
<td>Adelin</td>
<td>Larasati</td>
</tr>
<tr>
<td>Novero</td>
<td>Dayandra</td>
</tr>
<tr>
<td>Adika</td>
<td>Dayandra</td>
</tr>
</table>
</body>
</html>

Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :
Gambar  6.8 penerapan style color pada tabel
Ketika pada td tidak diberi style seperti pada style berikut :
<style>
table,th
{ border:1px solid green; }
th
{ background-color:green;color:white; }

</style>

Post a Comment

36 Comments

  1. Terimakasih telah membuat blog ini dengan blog ini saya bisa memahami cara membuat tabel dan arti sebuah tabel tersebut dan cara dasarnya,juga penerapan css ny seperti penampilannya sangat lengkap sekali blog ini sangat mudah untuk mempelajarinya nama saya kamelia kunjungi website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  2. terimakasih abang atas artikel yang abang buat ini dan ini sangat membantu saya dalam belajar membuat tabel dengan html dan css , sebelumnya perkenalkan saya Candra Ardiansyah Mahasiswa dari Kampus stmik Atma Luhur dan abang bisa cek website kampus saya di https://www.atmaluhur.ac.id/ sukses selalu untuk blog abang

    ReplyDelete
  3. Artikelnya sangatlah bermanfaat. Penulisan dan cara menjelaskanya sangat lah baik mengenai penerapan pada tabel CSS HTML. Penjelasannya sngat mudah di pahami dan di mengerti oleh pembaca, khususnya saya sendiri. Perkenalkan nama saya GITA LESTARI kunjungi website kampus kami https://www.atmaluhur.ac.id/

    ReplyDelete
  4. Terimakasih kak untuk artikel nya sangat bermanfaat untuk pembaca, dan yang lagi belajar cara Penerapan CSS pada elemen tabel. Semoga kedepannya biasa berkarya nama saya pauziah kunjungi website kampus saya di
    https://www.atmaluhur.ac.id/

    ReplyDelete
  5. Artikelnya menarik dan desainnya web sederhana sehinnga mudah dulibaca sedikit saran tolong penjelasan mayeri diperbanyak dan terimaklh kasih atas artikelnya nama saya claudio khelvin
    Ini website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  6. Terimakasih kak telah membuat blog ini dengan blog ini saya sedikit bisa memahami cara membuat tabel dan cara dasarnya,juga penerapan css ny seperti penampilannya sangat lengkap sekali blog ini sangat mudah untuk mempelajarinya nama saya syahrul nim 1922500206 klompok si2k kunjungi website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  7. Terima kasih kak telah memberi ilmu yang bermanfaat , materi ini sangat bagus dan mudah di mengerti. Sekarang saya sudah bisa membuat tabel dan caranya .
    Terima kasih kak sekali lagi semoga kakak sukses selalu .
    Perkenalkan nama saya DIAN ANGGREINI NIM 1922500136 . Link kampus https:/www.atmaluhur.ac.id/

    ReplyDelete
  8. Terimakasih kak atas materinya, sangat bagus. Isinya mudah dipahami, sangat membatu. melihat artikel ini saya bisa mengetahui cara menampilkan html dengan penerapan tabel css. ditunggu next materi lain tentang html kak,semoga sukses selalu.semoga sehat selalu agar bisa upload materi yg lain.
    Nama saya Ardelia Dwi Maharani
    Nim 1922500137
    Kelompok SI2K
    website kampus https://www.atmaluhur.ac.id/

    ReplyDelete
  9. terimakasih min, artikelnya cukup berguna untuk saya yang baru mempelajari tentang materi ini. disini saya bisa mengetahui cara membuat tabel di html. apalagi untuk saya yang kuliah di bagian komputer, artikel ini sangat membantu saya dan dapat membantu banyak orang juga. semoga kedepannya admin bisa membuat artikel bermanfaat lainnya. terimakasih min, semoga kedepannya admin makin sukses yaa.. Perkenalkan nama saya Ferlyta Athiyyah Rahil, silahkan kunjungi website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  10. thanks min untuk artikelnya dan ilmunya dari membaca artikel ini saya lebih mengenal bagaimana cara membuat tabel dengan html.semoga blog ini ke depannya dapat lebih memberikan artikel yg bermanfaat untuk kami yg baru belajar pemrograman web. Always success :)
    perkenalkan nama saya Rachma Dini kunjungi website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  11. Terimakasih min atas websitenya ,website ini sangat bermanfaat bagi saya tentang cara membuat tabel dengan html.apalagi untuk saya yang baru belajar tentang pemrograman web.saya harap admin disini selalu update memberikan informasi,sukses selalu..
    perkenalkan nama saya Nabil Rizky Hibatullah ,kunjugi website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  12. Hallo kak, termikasih atas ilmu yang kakak berikan pada website ini. Ilmunya sangat bermanfaat dan bisa membantu saya belajar cara membuat tabel dengan html. Semangat terus kak dalam berbagi ilmu nya. sukses terus kak, saya tunggu artikel selanjutnya. Perkenalkan nama saya Ranum Fatwa Aulia, NIM 1922500033,jangan lupa kunjungi website kampus saya di https://www.atmaluhur.ac.id/

    ReplyDelete
  13. perkenalkan nama saya reza pahlevi dari kampus stmik atma luhur pangkalpinang, web tentang cara membuat tabel html yang kakak buat sangat mudah dipahami dan bermanfaat bagi saya yang baru belajar tentang cara pembuatan web. semoga web yang kaka buat ini semakin berkembang kedepanya terimakasih kak. oh iya kunjungi juga website kampus kami di https://www.atmaluhur.ac.id/

    ReplyDelete
  14. artikel ini sangat bermanfaat dan mudah di pahami, sangat membantu saya membuat tabel pada HTML. saya harap admin dapat terus memberikan ilmu lainnya lagi, nama saya Muhammad Arga Sendiansyah. kunjungi web kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  15. Terimakasih telah membuat artikel ini karna telah membantu saya bagaimana penerapan CSS pada elemen tabel pada HTML,dan bagai mana konsep dasar model box,pengaturan border tabel,pengaturan lebar dan tinggi tabel,pengaturan text-align pada tabel,pemgaturan padding tabel dan pengaturan warna pada tabel,saya harap admin selalu memberikan ilmu lainnya dan selalu update.
    Perkenalkan nama saya RINTO ZUMARIS AKBAR. Kunjungi website kampus kami https://www.atmaluhur.ac.id/

    ReplyDelete
  16. artikelnya sangat berguna bagi saya yg baru mempelajari materi ini apalagi untuk saya yg masih baru belajar artikel ini sangat membantu saya untuk belajar memahaminya mulai cara membuat tabel dengan html, semoga saya bisa belajar menerapkannya,semoga kedepannya dapat membuat artikel lain yang bermanfaat bagi semua orang, perkenalkan nama saya Risa Aprilia kunjungi juga gan web kampus saya di link https://www.atmaluhur.ac.id/

    ReplyDelete
  17. artikel yang benar benar jelas penjelasannya mudah di pahami lagi ..
    awalnya cuma iseng buka artikelnya saya baca"ternyata menarik sekali .. saya jadi tambah semngatt belajar
    terimakasih ya gan sudah membuat artikel yang sangat bermanfaat ini .. terus berkarya dan sukses selalu
    perkenalkan nama saya indah lestari
    website kampus saya https://www.atmaluhur.ac.id

    ReplyDelete
  18. Artikel ini sangat bagus dan mudah di pahami untuk saya mahasiswa baru yang mempelajari tentang membuat tabel di html. Dengan adanya artikel ini saya sangat berterimakasih karena sangat membantu. Teruslah berkarya dan tambahkan artikel agar dapat membantu para pemula seperti saya lainnya. Nama saya Putra Raniansyah ini website kampus saya https://www.atmaluhur.ac.id/ us

    ReplyDelete
  19. Terima kasih gan untuk artikel mengenai Pembuatan Tabel nya gan. untuk ilmunya sih cukup mudah dipahami gan, kode html nya dijelasin sesuai dengan kegunaanya. Tapi kok untuk kode html nya tidak bisa di copy paste ya gan, jadi harus ketik secara manual hehehe. Untuk kedepanya terus berkarya gan dan saya harap kedepanya bisa buat artikel mengenai html lainya.
    Perkenalkan Nama Saya Andika Aprianus
    Kunjungi website kampus kami di Link ini https://www.atmaluhur.ac.id/

    ReplyDelete
  20. Terimakasih kak artikelnya sangat bagus dan sangat membantu saya untuk mengerjakan tugas ,setelah saya membaca artikel kakak saya lebih mudah memahami dan mengerti tentang Pembuatan Tabel, terus berkarya ya kak :)
    Perkenalkan saya nafiladona
    Kunjungi website kampus kami https://www.atmaluhur.ac.id/

    ReplyDelete
  21. Terimakasih kak artikel kak keren mudah di pahami bagi saya sendiri dan sangat membantu tugas perkuliahan saya. Perkenalkan nama saya m.jainuri nim 1922500045 dari kelas Si2J dan web kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  22. Sore kak.. Terima kasih kak artikel yang kakak buat sangat lebih memahami lebih jelas tentang html tabel dan css dan bermanfaat untuk saya membuat tugas kuliah kak dan mempermudah saya untuk lebih mengenal lebih luas lagi kak. Terus berkarya dan sukses selalu kak.
    Nama : Arvina Destiyani
    Nim. : 1922500073
    Kelompok : SI2J
    Link kampus : https://www.atmaluhur.ac.id/

    ReplyDelete
  23. Terimakasih kak artikel blognya sangat dapat membantu saya dan menambah ilmu juga dan blognya bagus dan menarik untuk dipelajari.perkenalkan Nim saya 1922500184, Nama Martin, Kelompok SI2K,link kampus sayawww.atmaluhur.ac.id

    ReplyDelete
  24. Penyampaian materi nya jelas banget kak terimakasih ya kak dengan membaca ini pengetahuan saya bertambah tentang html. Nama saya fira karunia 1722500127 , kunjungi juga website kampus saya untuk bertukar informasi https://www.atmaluhur.ac.id

    ReplyDelete
  25. seblumnya,saya sempat bingung dalam belajar penerapan html dengan tabel dan css tapi alhamdulilah setelah saya melihat web ini dengan berbagai tutorial nya saya jadi mudah untuk mempelajari dan mempraktekan nya di rumah dan sekarang saya mulai terbiasa ,untuk admin terimakasih dan terus berikan yang terbaik untuk pembaca,karena sungguh artikel ini sangat berguna bagi pemula seperti saya.
    perkenalkan saya Muhammad akbar
    silahkan kunjungi website kampus saya di link ini

    https://www.atmaluhur.ac.id/

    ReplyDelete
  26. haloo ka, selamat siangg .
    terimakasih ka artikel blognya sangat membantu saya dan cukup berguna untuk saya yang baru mempelajari tentang materi ini. disini saya bisa mengetahui cara membuat tabel di html. apalagi untuk saya yang kuliah di bagian komputer, artikel ini sangat membantu saya dan dapat membantu banyak orang juga.
    perkenalkan saya Jihan Jesica ( 2022500117 ) .
    silahkan kunjungi website kampus saya di link ini :

    https://www.atmaluhur.ac.id

    ReplyDelete
  27. hallo kak
    terimakasih artikelnya sangat bermanfaat dan juga mengajarkan saya mengenai penerapan CSS pada HTML, semangat terus kak untuk menulis artikel nya supaya bisa mempermudah kami dalam belajar apalagi untuk saya yang baru belajar, saya harap admin bisa menambah artikel yang lebih menarik lagi dari ini.
    Perkenalkan nama saya (Tasya marisca 2022500137) dan jangan lupa kunjungi web kampus saya di https://www.atmaluhir.ac.id/ terimakasih.

    ReplyDelete
  28. Artikel ini sangat bagus dan mudah di pahami untuk saya mahasiswa baru yang mempelajari tentang membuat tabel di html. Dengan adanya artikel ini saya sangat berterimakasih karena sangat membantu. Teruslah berkarya dan tambahkan artikel agar dapat membantu para pemula seperti saya
    Mampir juga di
    Http://mahasiswa.atmaluhur.ac.id/

    ReplyDelete
  29. Artikelnya sangatlah bermanfaat. Penulisan dan cara menjelaskanya sangat lah baik mengenai penerapan pada tabel CSS HTML. Penjelasannya sngat mudah di pahami dan di mengerti oleh pembaca, khususnya saya sendiri.
    Saya Randika
    Mampir juga di http://mahasiswa.atmaluhur.ac.id/

    ReplyDelete
  30. Terimakasih kak artikelnya sangat membantu saya dalam mengenal penerapan CSS dalam HTML, dan terus semangat untuk membuat artikel-artikel nya kak agar dapat membantu kita semua.

    Nama saya Vinti(2022500009)
    Jangan lupa berkunjung di

    http://www.atmaluhur.ac.id

    ReplyDelete
  31. Selamat siang,
    Saya Elma Aferla, Nim 2022500160 terimakasih artikelnya sangat membantu sekali, memberikan ilmu baru bagi yg ingin belajar penerapan CSS dalam HTML. Semangat untuk artikel selanjutnya Kak :) Kunjungi website Kampus kami di http://www.atmaluhur.ac.id/

    ReplyDelete
  32. Artikelnya cukup membantu kak, Terimakasih kak.
    Ditunggu artikel-artikel terbaik selanjutnya.
    Saya Egi Mulyaningsih mahasiswa dari ISB ATMA LUHUR PANGKALPINANG.
    Kunjungi juga website kampus kami di www.atmaluhur.ac.id

    ReplyDelete
  33. Terimakasih atas artikelnya kak, sangat membantu saya belajar menerapkan CSS dalam html,semoga kedepannya kakak selalu semangat dalam membagikan ilmu-ilmu yg berguna lainnya.
    Saya Sutia Dinarti Nim :2022500146
    Jangan lupa kunjungi juga website kampus kami di http:/www.atmaluhur.ac.id/

    ReplyDelete
  34. Selamat sore kak,Terimakasih telah membuat arikel ini dengan adanya artikel ini saya bisa memahami cara membuat tabel dengan HTML dan cara-cara dasarnya dan juga penerapan CSSnya sangat membantu sekali terutama untuk saya yang baru mempelajari materi ini.semoga blog ini kedepanya memberikan artikel yang lebih bermanfaat lagi.
    Perkenalkan nama saya Yasinta Kadha
    Kunjungi Website kampus saya di link ini
    https://www.atamaluhur.ac.id

    ReplyDelete
  35. Artikelnya sangat berguna bagi saya yg baru mempelajari materi ini apalagi untuk saya yg masih baru balajar artikel ini sangat membantu saya untuk belajar caa membuat tabel dengan HTML.semangat terus kak untuk membuat artikel-artikel yang bermanfaat.

    perkenalkan saya
    Cindy Carolin

    kunjungi website kampus saya di link ini
    https://www.atmaluhur.ac.id/
    Terimakasih

    ReplyDelete
  36. Haiii kak
    Terimakasih artikelnya sangat membantu saya dalam belajar tentang penerapan CSS pada tabel, saya jadi mengerti bagaiman cara membuat tabel, menambahkan efek margin, Border, dsb. Artikel ini sangat bermanfaat terutama bagi pemula seperti saya, untuk admin tetap semangat dan sukses slalu dlam membuat artikel lainnya
    Saya Fauziah Syafarina
    Kunjungi web kampus saya
    Https://www.atmaluhur.ac.id

    ReplyDelete

Close Menu