logo blog

2017-01-24T22:51:00+07:00

Cara Membuat Border Tabel Hanya di Tepi Luar Dengan Style CSS dan HTML

Border Tabel Tepi
Cara Membuat Border Tabel Hanya di Luar - Membuat border tabel di baris dan kolom menggunakan Style CSS di HTML sudah biasa di lakukan, tapi pernakah anda membuat tabel tetapi hanya garis luar tabelnya yang ingin terlihat tebal garisnya. Umumnya jika orang membuat border tabel di website dengan HTML. dan menggunakan Style CSS,  Border garis tabel akan terlihat semua di setiap kolom garis vertikal dan baris garis horisontal dari tabel tersebut, Untuk penggunaan border di semua kolom tabel sebenarnya tidak masalah selama tampilan dari tabel dan font yang digunakan sangat nyaman di lihat oleh mata.

Tetapi jika anda sudah bosan dengan tampilan tabel dengan border yang ada di setiap kolom dan ingin membuat tampilan tabel hanya garis bordernya di luar dari tabel tersebut. Pada kesempatan ini saya akan memberikan tipsnya bagaimana membuat border tebal tabel hanya terlihat di garis luar dari tabel dan memperindah tabelnya menggunakan style CSS.

Gunakan Caption Untuk Membuat Tabel hanya di Luar Garis Kolom

Untuk memulai membuat tebal tabel di luar kolom dan hanya garis luar saja yang di tebalkan, caranya menggunakan style caption. Berikut ini cara penggunaannya 
  1. Buat contoh tabel dengan format HTML terlebih dahulu, Silahkan gunakan script tabel HTML dibawah ini.
    <html>
    <head>
    <title>Untitled Document</title>
    style css Here.........
    </head>
    <body>
    <h1>Gambar Tabel HTML Dengan CSS</h1>
    <table width="600"><thead>
    <tr>
    <th class='center'> Nama</th>
    <th class='center'>Email</th>
    <th class='center'>Number Telp</th>
    </tr></thead>
    <tr>
    <td>admin</td>
    <td>admin@admin.com</td>
    <td>(+62) 85677777112</td>
    </tr>
    <tr>
    <td>Guest</td>
    <td>Guest@guest.com</td>
    <td>(+62) 85677777113</td>
    </tr>
    </table>
    </html>
  2. Buat Style css nya untuk membuat border garis hanya di bagian tepi dari tabel contoh di atas. Copy script dibawah ini kemudian pastekan di bagian tengah <head> ...</head>. jika lihat contoh tabel diatas yang ada warna merah. Atau anda mau membuat dengan gaya inline CSS Style di luar nama tabel juga bisa.
    table { 
    border-collapse:collapse;
    border: 1px solid #999;  
    font-family:Arial, sans-serif;
    font-size:16px;
    width:100%;
    caption-side: top;
    }
    caption, table th {
    font-weight:bold;
    padding:10px;
    color:#fff;
    background-color:#2A72BA;
    border-top:1px black solid;
    border-bottom:1px black solid;
    }
    caption, table td {
    padding:10px;
    border-top:1px black solid;
    border-bottom:1px black solid;
    text-align:center; 
    }   
    caption {
    font-weight: bold;
    font-style: italic;
    }
    table .left {
    text-align: left;
    padding: 7px;
    }
    
  3. Jika contoh tabel diatas dan CSS sudah anda buat maka tampilan tabel border di luar kolom akan tampil seperti gambar dibawah ini
Sekarang tampilan gambar tabel diatas hanya terlihat tebal tabel hanya ada di luar kolom atau tepi kolom paling luar. Demikian cara membuat border tabel hanya terlihat di luar kolom atau garis paling luar dari tabel. mudah bukan?. sekarang anda bisa kreasikan warna tabel, tebal tabel, panjang tabel, tinggi baris kolom di style CSS agar lebih menarik lagi Semoga tips diatas bisa membantu anda membuat desaign tampilan web dengan menggunakan tabel lebih menarik lagi.
Subscribe to this Blog via Email :
Author commando98

Author:

Dalam Bekerja Harus Menantang Menantang Itu Harus Menyenangkan

2 comments

Write comments