Cara Membuat Tag Tables di HTML | Web Edukasi - Sanabila.com

Home

Daftar Isi

Instagram

Google+

Facebook

Twitter

Contact

Pasang Iklan

Refresh
Loading...

Cara Membuat Tag Tables di HTML

Cara Membuat Tag Tables di HTML - Pada chapter Sebelumnya kita sudah membahas tentang :
Selanjutnya, pada artikel ini kita akan lebih meperdalami tentang Cara Membuat Tables di HTML.

Chapter 10. Cara Membuat Tables di HTML
Chapter 10: Cara Membuat Tables di HTML


Tables...

Contoh Pembuatan Table di HTML...


Apa guna Tabel?
Tabel digunakan untuk membuat data lebih mudah dilihat untuk menginterpretasikan atau hanya memberikan dokumen Anda terlihat rapi dan terstruktur.


<table border=4> <tr> <th>Apa guna Tabel?</th> </tr> <tr> <td>Tabel digunakan untuk membuat data lebih mudah dilihat untuk menginterpretasikan atau hanya memberikan dokumen Anda terlihat rapi dan terstruktur.</td> </tr> </table>

Tag Tabel adalah salah satu pembuatan tag yang cukup menantang pada kode HTML. Namun, hal ini tidak terlalu sulit, karena Anda hanya membutuhkan beberapa saat untuk dapat menguasainya. Tag Tabel dimulai dengan <table>, dan biasanya diberi tambahan atribut border=n diantara tag pembuka. Jika border=0, Maka border table tersebut bersifat invinsible. Hal ini berguna ketika Anda ingin menyelaraskan teks dalam baris dan kolom, tetapi tidak ingin ada border di sekitarnya. border=1 adalah border dengan ketebalan 1, border ini cukup tipis. border=2 adalah border dengan ketebalan 2, border ini lebih tebal. border=3 border dengan ketebalan lebih tebal lagi.. dan seterusnya. Tag table harus diakhiri dengan tag </table>, jika tag table tidak diakhiri maka tabel tidak akan muncul sama sekali!

Contoh membuat table dengan border...

Table dengan ketebalan 0.

<table border=0> <tr>
<td>Table dengan ketebalan 0.</td>
</tr> </table>
Table dengan ketebalan 3.

<table border=3> <tr>
<td>Table dengan ketebalan 3.</td>
</tr> </table>

Setiap baris dalam tabel didefinisikan oleh tag pembuka <tr> dan tag penutup </tr>. Dalam setiap baris tabel memiliki cell tabel, yang didefinisikan oleh tag pembuka <td> dan tag penutup </td>. Kebanyakan baris tabel berisi lebih dari satu sel. Anda juga akan membutuhkan judul untuk kolom sel dari baris pertama. Untuk melakukan ini, Anda akan menggunakan tag pembuka<th> dan tag penutup </th>. Tag pada Table heading membuat text pada cell menjadi BOLD dan CENTERED. Anda bisa menggunakan heading cells ketika diperlukan.

Contoh tabel dengan beberapa baris dan kolom...


Heading AHeading BHeading C
Cell ACell BCell C
Cell DCell ECell F


<table border=2> <tr> <th>Heading A</th><th>Heading B</th><th>Heading C</th> </tr> <tr> <td>Cell A</td><td>Cell B</td><td>Cell C</td> </tr> <tr> <td>Cell D</td><td>Cell E</td><td>Cell F</td> </tr> </tr> </table>


Lalu bagaimana jika Anda ingin membuat table seperti dibawah ini?


Heading AHeading BHeading C
Cell A & DCell BCell C
Cell ECell F

<table border=2> <tr> <th>Heading A</th><th>Heading B</th><th>Heading C</th> </tr> <tr> <td rowspan=2>Cell A & D</td><td>Cell B</td><td>Cell C</td> </tr> <tr> <td>Cell E</td><td>Cell F</td> </tr> </tr> </table>

Perhatikan bagaimana penambahan atribut rowspan=2. Hal ini memungkinkan sel untuk rentang sebanyak dua baris. Jika Anda ingin memperbanyak sel lebih dari beberapa kolom, gunakan atribut colspan=n. juga, Anda mungkin ingin menggunakan atribut ALIGN dan VALIGN untuk menyelaraskan isi sel. Jika Anda ingin mengubah alignment horizontal isi sel tertentu, tambahkan ALIGN=LEFT, ALIGN=CENTER, or ALIGN=RIGHT di tag pembuka <td>. Jika Anda ingin mengubah alignment vertikal dari isi sel, gunakan atribut VALIGN=TOP, VALIGN=MIDDLE, or VALIGN=BOTTOM. Anda juga mungkin ingin mencoba atribut WIDTH=n%, untuk mengubah lebar tabel atau sel.

Contoh ALIGN atribut dalam tabel...


Left AlignmentCenter AlignmentRight Alignment



<table border=1 width=100%> <tr> <td align=left>Left Alignment</td> <td align=center>Center Alignment</td> <td align=right>Right Alignment</td> </tr> </table>





Share on Google Plus
Written by: Sanabila. com
Sanabila, Updated at: 2/08/2015