CSS Chapter 3 - Tampilan (Tabel - Border - Display - Max-width - Posisi - Float - Align )

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

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

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;

• Display 

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;

• Max - Width 

         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.

•  Posisi

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.  

• Float

 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".

• Align 

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 :

• Teks h2 = 

         Warna : Merah
         Text-align : Center
         Type         : h2 (untuk judul)

• Tabel =

          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