1. Latar Belakang
Tabel merupakan bagian / tampilan yang menunjukan informasi
dengan berupa baris dan kolom. tabel pada umumnya jika menggunakan HTML
hanya berupa garis biasa yang terdiri dari garis - garis yang membatasi
dan menandai baris dan kolom. pada CSS ini saya akan berbagi sedikit
bagaimana merubah tampilan , efek pada tabel dengan merubah atau
mengatur Border - Display - Max-width -Posisi - Float - Align .
2. Tujuan
Memperindah tabel dengan mengatur Tabel - Border - Display - Max-width - Posisi - Float - Align
3. Pembahasan
Tabel merupakan bagian / tampilan yang menunjukan informasi dengan berupa baris dan kolom.
Tabel dapat merujuk kepada:
Tabel (informasi), sebuah alat untuk menampilkan informasi dalam bentuk
matriks.Sebagai contoh adalah tabel matematika, tabel kebenaran, tabel
periodik, elemen tabel HTML (<table></table>), dan
lain-lain.Tabel (database), sebuah set data di dalam suatu database.
Tabel dapat berarti daftar
Sintaxs tabel pada html :
<table></table>;
<table> digunakan untuk membuka atau memulai membuat tabel, dan </table>
digunakan untuk mengakhiri membuat tabel.
Border merupakan pembatas yang digunakan / sebutan untuk pembatas tabel.
border bisa berupa garis atau simbol yang ditata / diatur mengelilingi tabel .
perintah border digunakan pada sintaxs tabel . border juga memiliki beberapa jenis atau style :
1. Solid
2. Collpase
Border juga bisa diatur lebar atau ketebalannya dengan ukuran "px"
contoh :
Sintaxs border tabel pada html :
<table>border-collapse : 2px; </table> atau border: 1px solid black;
Properti Display ,menentukan jika / bagaimana elemen ditampilkan.
Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis
elemen itu. Tampilan nilai default untuk sebagian besar elemen adalah
blockatau inline
1. Element Inline (satu baris) :
Merupakan element yang digunakan untuk menampilkan atau mengatur
kontent menjadi Horisontal . Elemen inline tidak dimulai pada baris baru
dan hanya membutuhkan sebanyak lebar yang diperlukan.memiliki arah
ke-samping karna horisontal
display: inline;
2. Element Block
Merupakan element yang digunakan untuk menampilkan atau mengatur
kontent menjadi Vertikal .Sebuah elemen blok-tingkat selalu dimulai pada
baris baru
dan mengambil lebar penuh yang tersedia (membentang ke kiri dan kanan
sejauh itu bisa). memiliki arah kebawah karna vertikal.
display: block;
3.Element None
Merupakan elemen yang digunakan dengan JavaScript untuk
menyembunyikan dan menampilkan elemen tanpa menghapus dan menciptakan
mereka.
display: none;
Merupakan perintah yang bersangkutan dengan ukuran yang kita
tulis pada sintaxs - sintaxs. contoh saat mengatur ukuran gambar,halaman
atau lainnya yang memliki ukuran lebar . Menggunakan Max-width untuk
menyesuaikan ukuran yang diperintahkan.
max-width:500px;
"max" =maksimal."width"=lebar. "500px"=ukuran. yang berarti
max-width mengatur ukuran maksimal sesuai apa yang diperintahkan.
Properti Posisi menetapkan jenis metode penentuan posisi yang digunakan untuk elemen (statis, relatif, tetap atau absolut).
1. Posisi statis
position: statis;
Digunakan untuk mengatur posisi yang statis , tidak dapat diubah posisi penempatannya .
2.Posisi relative
position: relative;
Digunakan untuk mengatur posisi yang relativ , posisi dapat diatur dan diubah sesuai keinginan dan kebutuhan .
Contoh :
position: relative;
left: 30px;
Mengartikan bahwa : Posisi relatif ketepatan sebelah kiri jarak 30px.
3. Posisi fixed
position: fixed;
Digunakan untuk mengatur posisi dengan tempat yang sama tanpa ber-ubah -
ubah. bahkan jika halaman tersebut menggulir. Atas, kanan, bawah, dan
sifat kiri digunakan untuk posisi elemen.Unsur tetap tidak meninggalkan
celah di halaman mana itu biasanya telah berada.
Contoh :
position: fixed;
bottom: 0;
right: 0;
width:
300px;
Mengartikan bahwa : Posisi fixed dengan jarak bawah "0" jarak kanan "0" dan lebar = 300px.
4. Posisi Absolute
position: absolute;
Digunakan untuk mengatur posisi dengan tempat yang berada mengambang
diatas halaman awal . atau bertumpuk menutupi halaman belakangnya .
Contoh :
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
Mengartikan bahwa, posisi Absolute dengan posisi bagian atas 80px, sebelah kanan 0 dan lebar 200px panjang 100px.
Merupakan element perintah yang digunakan untuk mengambangkan bagian
yang ada pada halaman. pengambangan tersebut berlaku hanya pada sisi
kanan dan kiri.atau properti float juga dapat digunakan untuk membungkus
teks di sekitar gambar.
float: right;
margin: 0 0
10px 10px;
float: left;
margin: 0 0
10px 10px;
Mengartikan bahwa,posisi float sebelah kanan dan kiri margin : untuk
mengatur jarak antar elemen bagian luar. 0 = "untuk mengatur bagian
atas" ,0="untuk mengatur bagian kanan" , 10px="untuk mengatur bagian
bawah" dan 10px="untuk mengatur bagian kiri".
Merupakan perintah yang digunakan untuk menyelaraskan elemen horizontal dan vertikal.
1. Untuk mengatur agar element berada di sebelah kanan menggunakan :
text-align: right;
2. Untuk mengatur agar element berada di sebelah kiri menggunakan :
text-align: left;
3.Untuk mengatur agar element berada di sebelah kiri menggunakan :
text-align: center;
Contoh penerapan sintaxs - sintaxs diatas :
Membuat Tabel
Dengan Mengatur Border,Ketebalan,Lebar,Float,Padding,Posisi Border,Hover,Nth Child
 |
| index.html |
 |
| style.css |
|
Menggunakan Perintah untuk mengatur tabel, dengan:
- Posisi
- Border
- Max-width
- Margin
- Overflow-x
- Text-Aign
- Warna
- Background-color
- Hover
- Nth-Child
Keterangan :
Warna : Merah
Text-align : Center
Type : h2 (untuk judul)
Posisi : Relative
Border : Collapse
Widht : Max-width
Margin : auto (otomatis)
Padding : 10px
Text-Align : Left
Border-bottom : 1px solid #ddd
Border-right : 1px solid black
Background-color th : blue
Hover : background - color lightblue
Nth-child : background-color : #f2f2f2
Sekian apa yang dapat saya sampaikan mengenai CSS - mengatur Tabel -
Border -Display - Max-width - Posisi - Float - Align.Masih banyak
perintah - perintah yang dapat digunakan untuk mengatur tabel.dapat
dilihat di posting - posting saya sebelumnya atau setelah ini. untuk
buku resminya juga dapat dicari di referensi berikut ini.
4. Referensi :
- https://id.wikipedia.org/wiki/Tabel
- http://www.w3schools.com/css/css_display_visibility.asp
- http://www.w3schools.com/css/css_positioning.asp
- http://www.w3schools.com/css/css_align.asp
Terimakasih , Wassalamualaikum.wr.wb
By
Nurroin's Blog
