logo blog

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

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.

5 comments

2016-12-01T21:53:00+07:00
thumbnail

Cara Membuat Tabel HTML CSS

tabel-html
Tabel merupakan kumpulan data informasi yang disusun saling berhubungan berdasarkan baris dan kolom dalam HTML yang ada di halaman web.  Artikel sebelumnya kita sudah belajar membahas Cara Membuat Tabel HTML di web. Pada kesembatan ini saya akan berbagi  tutorial Bagimana membuat tabel HTML dengan Style CSS. Di materi sebelumnya membuat tabel HTML tanpa CSS tentu masih kurang menarik untuk dilihat. Sekarang bagaimana membuat tabel HTML menarik dengan element CSS (style sheet).  Sebelum saya mulai saya jelaskan terlebih dahulu dibawah ini tag HTML dan elemen CSS untuk membuat tabel agar terlihat menarik.

Penjelasan Tag Tabel HTML

  • Tag <table> digunakan untuk memulai tabel
  • Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
  • Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
  • Tag  <thead> adalah tag yang digunakan untuk mengelompokkan header dan format konten sebagai kesatuan header (kepala) dari tabe
Untuk scriptnya bisa langsung lihat dibawah ini 

<html>
<head>
<title>Untitled Document</title>
 <style>
table {
 font-family: Tahoma; 
 font-size: 8pt;
 border-width: 1px;
 border-style: solid;
 border-color: #999999;
 border-collapse: collapse;
 margin: 5px 0px;
 margin-left:5px;
 margin-right:5px;
        margin-top:5px;
 margin-bottom:5px;
}
th{
 color: #FFFFFF;
 font-size: 7pt;
 text-transform: uppercase;
 text-align: center;
 padding: 0.5em;
 background:url(images/header-bg.gif); 
 border-width: 1px;
 border-style: solid;
 border-color: #969BA5;
 border-collapse: collapse;
 background-color: #265180;
}
td{
 padding: 0.5em;
 vertical-align: top;
 border-width: 1px;
 border-style: solid;
 border-color: #969BA5;
 border-collapse: collapse;
}
thead td {
 background-color: #E5E5E5; 
 padding: 5px 0 5px 0; text-transform: capitalize;
 text-align:center;

}
</style>
</head>
<body>
<h1>Gambar Tabel HTML Dengan CSS</h1>
<table width="600"><thead>
  <tr>
    <td colspan="3">header</td>
  </tr></thead> 
  <tr>
    <td> 5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>
</body>
</html>
Perhatikan script tabel css yang menarik diatas, Untuk penggunaan elemen css ada dibawah tag <head> dan diatas </head> berwarna merah. Dari element css diatas bisa anda kembangkan seperti background-color, border-color bisa anda rubah sesuai keinginan anda.

Demikian tutorial bagimana membuat tabel dengan css yang menarik untuk dilihat. Semoga ini bisa bermanfaat dan jika kurang jelas bisa comment dibawah ini.

6 comments

2016-11-21T23:38:00+07:00
thumbnail

Cara Membuat Tabel HTML

tabel-html
Tabel adalah Kumpulan data informasi yang disusun saling berhubungan berdasarkan baris dan kolom dalam HTML yang ada di halaman web.  Tabel di web sudah banyak digunakan oleh orang membangun web dari yang pakar ahli di pemrograman sampai pemula. Bagi anda seorang pemula yang masih belajar membuat web sendiri dengan tampilan sederhana biasanya untuk yang pertama mengalami kesulitan jika membangun sebuah tabel di script HTML. Pada kesempatan ini saya akan memberikan banyak cara membuat tabel di HTML. Sebelum memulainya saya terangkan terlebih dahulu tag yang perlu dipakai untuk membangun sebuah tabel yaitu TABLE, TR, TD.

Penjelasan Tag Tabel HTML

  • Tag <table> digunakan untuk memulai tabel
  • Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
  • Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
Untuk lebih jelasnya langsung saja saya berikan contoh script kode tabel HTML

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<h1>Gambar Tabel Sederhana Menggunakan HTML</h1>
<table width="600" border="1">
  <tr>
    <td> 1</td>
    <td> 2</td>
    <td> 3</td>
  </tr>
  <tr>
    <td> 5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>
</body>
</html>
Perhatikan  tag diatas saya hanya memberikan atribut border nilai 1 dan widht atau penjang tabel 600. Atribut border digunakan untuk memberikan tebal tipisnya garis tepi dari tabel, semakin besar ukuran pixel border akan semakin tebal tabel tersebut. Untuk atribut widht atau panjang tabel semakin besar pixel width semmakin panjang tabel tersebut

Sekarang mari kita kembangkan bentuk tabel diatas seperi  menggabungkan cell satu dengan yang lainnya :

1. Marger Cell Column Tabel HTML 

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<h1>Gambar Marger Cell Column Tabel HTML</h1>
<table width="600" border="1">
  <tr>
    <td> 1</td>
    <td rowspan="3"> 269</td>
    <td> 3</td>
  </tr>
  <tr>
    <td> 5</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>10</td>
  </tr>
</table>
</body>
</html>
Perhatikan tag marger cell diatas, saya hanya menambahkan rowspan="3" Yang artinya column yang berhasil di marger sebanyak 3 coloumn

2. Marger Cell BerisTabel HTML 

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<h1>Gambar Marger Cell Baris Tabel HTML</h1>
<table width="600" border="1">
  <tr>
    <td colspan="3"> 1 2 3</td>
  </tr>
  <tr>
    <td> 5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>
</body>
</html>
Perhatikan tag marger cell baris diatas, saya hanya menambahkan colspan="3" Yang artinya baris yang berhasil di marger sebanyak 3 baris.

Demikianlah Cara Membuat Membuat Tabel Menggunakan HTML yang sering digunakan dalam pembuatan halaman web. Untuk membuat halaman tabel yang lebih menarik lagi anda bisa gunakan CSS (style sheet) di halaman HTML. berikut ini tutorial Cara Membuat Tabel HTML CSS

4 comments