)
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>
36 Comments
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/
ReplyDeleteterimakasih 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
ReplyDeleteArtikelnya 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/
ReplyDeleteTerimakasih 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
ReplyDeletehttps://www.atmaluhur.ac.id/
Artikelnya menarik dan desainnya web sederhana sehinnga mudah dulibaca sedikit saran tolong penjelasan mayeri diperbanyak dan terimaklh kasih atas artikelnya nama saya claudio khelvin
ReplyDeleteIni website kampus saya https://www.atmaluhur.ac.id/
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/
ReplyDeleteTerima kasih kak telah memberi ilmu yang bermanfaat , materi ini sangat bagus dan mudah di mengerti. Sekarang saya sudah bisa membuat tabel dan caranya .
ReplyDeleteTerima kasih kak sekali lagi semoga kakak sukses selalu .
Perkenalkan nama saya DIAN ANGGREINI NIM 1922500136 . Link kampus https:/www.atmaluhur.ac.id/
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.
ReplyDeleteNama saya Ardelia Dwi Maharani
Nim 1922500137
Kelompok SI2K
website kampus https://www.atmaluhur.ac.id/
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/
ReplyDeletethanks 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 :)
ReplyDeleteperkenalkan nama saya Rachma Dini kunjungi website kampus saya https://www.atmaluhur.ac.id/
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..
ReplyDeleteperkenalkan nama saya Nabil Rizky Hibatullah ,kunjugi website kampus saya https://www.atmaluhur.ac.id/
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/
ReplyDeleteperkenalkan 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/
ReplyDeleteartikel 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/
ReplyDeleteTerimakasih 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.
ReplyDeletePerkenalkan nama saya RINTO ZUMARIS AKBAR. Kunjungi website kampus kami https://www.atmaluhur.ac.id/
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/
ReplyDeleteartikel yang benar benar jelas penjelasannya mudah di pahami lagi ..
ReplyDeleteawalnya 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
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
ReplyDeleteTerima 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.
ReplyDeletePerkenalkan Nama Saya Andika Aprianus
Kunjungi website kampus kami di Link ini https://www.atmaluhur.ac.id/
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 :)
ReplyDeletePerkenalkan saya nafiladona
Kunjungi website kampus kami https://www.atmaluhur.ac.id/
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/
ReplyDeleteSore 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.
ReplyDeleteNama : Arvina Destiyani
Nim. : 1922500073
Kelompok : SI2J
Link kampus : https://www.atmaluhur.ac.id/
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
ReplyDeletePenyampaian 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
ReplyDeleteseblumnya,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.
ReplyDeleteperkenalkan saya Muhammad akbar
silahkan kunjungi website kampus saya di link ini
https://www.atmaluhur.ac.id/
haloo ka, selamat siangg .
ReplyDeleteterimakasih 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
hallo kak
ReplyDeleteterimakasih 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.
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
ReplyDeleteMampir juga di
Http://mahasiswa.atmaluhur.ac.id/
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.
ReplyDeleteSaya Randika
Mampir juga di http://mahasiswa.atmaluhur.ac.id/
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.
ReplyDeleteNama saya Vinti(2022500009)
Jangan lupa berkunjung di
http://www.atmaluhur.ac.id
Selamat siang,
ReplyDeleteSaya 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/
Artikelnya cukup membantu kak, Terimakasih kak.
ReplyDeleteDitunggu artikel-artikel terbaik selanjutnya.
Saya Egi Mulyaningsih mahasiswa dari ISB ATMA LUHUR PANGKALPINANG.
Kunjungi juga website kampus kami di www.atmaluhur.ac.id
Terimakasih atas artikelnya kak, sangat membantu saya belajar menerapkan CSS dalam html,semoga kedepannya kakak selalu semangat dalam membagikan ilmu-ilmu yg berguna lainnya.
ReplyDeleteSaya Sutia Dinarti Nim :2022500146
Jangan lupa kunjungi juga website kampus kami di http:/www.atmaluhur.ac.id/
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.
ReplyDeletePerkenalkan nama saya Yasinta Kadha
Kunjungi Website kampus saya di link ini
https://www.atamaluhur.ac.id
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.
ReplyDeleteperkenalkan saya
Cindy Carolin
kunjungi website kampus saya di link ini
https://www.atmaluhur.ac.id/
Terimakasih
Haiii kak
ReplyDeleteTerimakasih 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