Belajar HTML Part 19 Cara Membuat Tabel di HTML

bySetyo Wibowo ID - 0

Tutorial kali ini akan membahas mengenai cara membuat tabel di HTML, tabel digunakan untuk menampilkan data, baik itu data statis ataupun data dinamis dari database misalnya





baik langsung saja ya kita coba bahas beberapa hal yang ada di tabel HTML.





Cara Membuat tabel HTML dengan tag<table>,<tr>,<td>





untuk membuat tabel di HTML anda bisa menggunakan 3 tag, antara lain :





  1. Tag <table>        : merupakan tag utama dari table, yang digunakan untuk memulai pembuatan tabel
  2. Tag <tr>              : merupakan tag yang digunakan untuk membuat baris pada tabel
  3. Tag <td>             : merupakan tag yang digunakan untuk membuat kolom di masing – masing baris pada tabel




bagaimana langsung kita coba ya… silahkan anda ketikkan skrip di bawah ini :





<!DOCTYPE html>
<html>
<head>
   <title>Tabel di HTML</title>
</head>
<body>
<h1>Belajar Membuat tag HTML</h1>
<table border="1">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
    </tr>
</table>
</body>
</html>




lalu saya simpan dengan nama semisal tabel.html dan dibuka di browser kesayangan anda :





cara_membuat_table_html




terlihat dari hasil gambarnya, akan terbuat 1 table, yang memiliki 2 baris, dan di setiap baris memiliki 2 kolom, mudah kan, lalu pada tag table saya juga menambahkan border=”1″ yang artinya akan memberikan garis tepi pada table dengan besar 1 pixel.





Attribute Border di tabel HTML





Attribute border digunakan untuk mengatur ukuran garis tepi yang ada pada tabel html, satuan yang digunakan adalah satuan pixel.





jika anda tidak memberikan nilai pada bagian border maka tabel akan ditampilkan tanpa memiliki garis, baik langsung kita coba ya dan kita coba bandingkan.





<!DOCTYPE html>
<html>
<head>
   <title>Tabel di HTML</title>
</head>
<body>
<h1>Tabel dengan border 0</h1>
<table border="0">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
    </tr>
</table>
<br/>
<h1>Tabel dengan border 8</h1>
<table border="8">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
    </tr>
</table>
</body>
</html>




lalu saya simpan semisal dengan nama border_tabel.html , lalu saya buka di browser maka hasilnya adalah sebagai berikut :





border_tabel




hasilnya ada 2 tabel :





  • Tabel yang bagian atas karena menggunakan border 0 sehingga tidak memiliki garis
  • Tabel kedua yang menggunakan border 8, memiliki garis yang tepi dengan besar 8 pixel




gimana mudahkan untuk mengatur dari tabel.





Attribute Cellspacing di Tabel HTML





Attribute Cellspacing digunakan untuk mengatur jarak luar antar masing masing cell, bagaimana bingung ya ?





baik akan kita coba untuk membuat skrip sederhanya, untuk satuannya juga sama seperti border yaitu pixel, contoh skripnya adalah sebagai berikut :





<!DOCTYPE html>
<html>
<head>
   <title>Tabel di HTML</title>
</head>
<body>
<h1>Tabel dengan border 1 cellspacing 1</h1>
<table border="1" cellspacing="1">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
    </tr>
</table>
<br/>
<h1>Tabel dengan border 1 cellspacing 10</h1>
<table border="1" cellspacing="10">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
    </tr>
</table>
</body>
</html>




lalu saya simpan semisal dengan nama cellspacing_table.html , jika kita buka di browser hasilnya adalah sebagai berikut :





cellspacing tabel html




jika anda perhatikan antara tabel 1 dan tabel 2 :





  • Tabel pertama kita set cellspacingnya adalah 1 sehingga jarak antar cell hanya 1 pixel
  • Tabel kedua kita set cellspacingnya adalah 10 sehingga jarak antar cell adalah 10 pixel




jelas sekali kan perbedaannya, dan mudah sekali bukan cara penggunaannya





Attribute Cellpadding di tabel HTML





Attribute  cellpadding digunakan untuk mengatur ukuran dari garis di masing masing cell dan objek yang ada didalamnya, baik langsung aja kita coba buat, agar tidak bingung hehe





<!DOCTYPE html>
<html>
<head>
   <title>Tabel di HTML</title>
</head>
<body>
<h1>Tabel dengan border 1 cellpadding 1</h1>
<table border="1" cellpadding="1">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
    </tr>
</table>
<br/>
<h1>Tabel dengan border 1 cellpadding 10</h1>
<table border="1" cellpadding="10">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
    </tr>
</table>
</body>
</html>




lalu saya simpan semisal dengan nama cellpadding_table.html , lalu saya buka di browser, maka hasilnya adalah sebagai berikut :





cellpadding tabel di html




Maka hasilnya adalah :





  • Tabel pertama antara garis di bagian cell dan textnya hampir tidak memiliki jarak karena kita hanya menggunakan cellpadding 1
  • Tabel kedua kita menggunakan cellpadding 10 sehingga jarak antara baris dan textnya memiliki jarak sebesar 10 pixel




Attribute Rowspan dan Colspan di tabel HTML





Kedua Attribute ini hampir memiliki fungsi yang sama, yaitu untuk menggabungkan beberapa bagian dari tabel, lalu apa yang membedakan, mari kita bahas…





  • Attribute Rowspan digunakan untuk menggabungkan bagian tabel (cell) yang berada di bawahnya atau bisa kita sederhanakan untuk menggabungkan bagian tabel secara vertical.
  • Attribute Colspan digunakan untuk menggbungkan bagian tabel (cell) yang berada di sebelahnya atau bisa kita sederhanakan untuk menggabungkan bagian tabel secara horizontal.




kedua attribute ini diletakkan di bagian tag <td>, agar tidak bingung kita akan membuat skrip html sederhana agar anda lebih mengerti dari penggunaan attribute rowspan dan colspan.





<!DOCTYPE html>
<html>
<head>
   <title>Tabel di HTML</title>
</head>
<body>
<h1>Tabel dengan menggunakan rowspan</h1>
<table border="1">
    <tr>
        <td rowspan="2">Baris 1 Kolom 1 dan Baris 2 Kolom 1 </td>
        <td>Baris 1, Kolom 2</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 2</td>
    </tr>
</table>
<br/>
<h1>Tabel dengan menggunakan colspan</h1>
<table border="1">
    <tr>
        <td colspan="2">Baris 1 Kolom 1 dan Kolom 2</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
    </tr>
</table>
</body>
</html>




lalu saya simpan semisal dengan nama colspan_rowspan_tabel.html , lalu saya buka di browser, maka hasilnya adalah sebagai berikut :





rowspan_colspan_tabel_html




maka hasilnya adalah sebagai berikut :





  • Tabel pertama yang menggunakan rowspan otomatis akan menggabungkan dari baris 1 kolom 1 dan baris 2 kolom 1 karena kita menggunakan attribute rowspan pada tag <td> di baris 1 kolom 1
  • Tabel kedua yang menggunakan colspan otomatis akan menggabungkan baris 1 kolom 1 dan baris 1 kolom 2 karena kita menggunakan attribute rowspan pada tag <td> di baris 1 kolom 1




Attribute TH di tabel HTML





Attribute ini digunakan untuk menggantikan tag <td> pada bagian header dari tabel, bagian header itu biasanya adalah baris pertama yang ada pada bagian tabel, biasanya digunakan sebagai keterangan dari data masing masing kolom.





Lalu apa perbedaanya jika kita menggunakan <td> dan <th> ?





perbedaanya adalah jika kita menggunakan tag <th> maka text akan ditampilkan dengan huruf tebal (bold) serta textnya akan berada di tengah (center),lalu saya buat skrip sederhana dibawah ini :





<!DOCTYPE html>
<html>
<head>
   <title>Tabel di HTML</title>
</head>
<body>
<h1>Tabel dengan menggunakan rowspan</h1>
<table border="1">
    <tr>
		<th>No</th>
		<th>Nama</th>
    </tr>
    <tr>
        <td>1</td>
		<td>Aris Samsudin</td>
    </tr>
	<tr>
        <td>2</td>
		<td>Taufik Hidayat</td>
    </tr>
</table>
</body>
</html>




lalu saya simpan dengan nama semisal tag_th_tabel.html, lalu saya buka di browser :





tag_th_tabel_html




hasilnya terlihat untuk kolom yang menggunakan tag <th> ditampilkan dengan huruf tebal (bold)serta berada di tengah (center), bagaimana mudah kan ?..





Tag caption di tabel HTML





Tag caption digunakan untuk memberikan judul dari tabel, sebenarnya anda bisa saja langsung menuliskan judul dari tabel dengan langsung menuliskan text yang diletakkan di atas bagian tabel, tetapi dari pihak HTML sendiri telah menyediakan pembuatan judul langsung dengan menggunakan tag caption.





Tag Caption bisa anda letakkan setelah tag tabel pembuka dan sebelum tag <tr> untuk baris pertama.





baik langsung saja kita buat skrip sederhana.





<!DOCTYPE html>
<html>
<head>
   <title>Tabel di HTML</title>
</head>
<body>
<h1>Tabel dengan Caption</h1>
<table border="1">
	<caption>Tabel Data Siswa</caption>
        <tr>
		<th>No</th>
		<th>Nama</th>
        </tr>
        <tr>
                <td>1</td>
		<td>Aris Samsudin</td>
        </tr>
	<tr>
                <td>2</td>
		<td>Taufik Hidayat</td>
        </tr>
</table>
</body>
</html>




lalu saya akan simpan semisal dengan nama caption_tabel.html, lalu saya buka di browser.





tag_caption_tabel_html




terlihat tabelnya memiliki judul pada bagian atas dari tabel, jadi gimana mudahkan untuk membuat caption di dalam tabel html.





Tag <thead>, <tbody>, dan <tfoot> di tabel HTML





Seperti yang anda ketahui bahwa tabel biasanya digunakan untuk menampilkan data dalam bentuk tabel, nah jika tabel diperlukan untuk menampilkan data yang kompleks.





Anda pasti akan membutuhkan strukutur tabel yang mudah dipahami agar ketika merubah style tabel di css dapat lebih mudah.





Nah di HTML terdapat fitur untuk membagi strukutur tabel menjadi beberapa bagian yang akan diwakili oleh 3 tag antara lain :





  • <thead></thead> : untuk mendeklarasikan bagian header dari tabel
  • <tbody></tbody> : untuk mendeklarasikan bagian body dari tabel
  • <tfoot></tfoot>     : untuk mendeklarasikan bagian footer dari tabel




sekilas jika anda menggunakan tag ini memang tidak ada yang berbeda dalam hasil tabel yang dihasilkan, tetapi jika anda menggunakan skrip css untuk merubah stylenya anda dapat terbantu dengan adanya 3 tag ini, baik langsung saja kita coba ya, kita akan buat skrip sederhana :





<!DOCTYPE html>
<html>
<head>
   <title>Tabel di HTML</title>
<style type="text/css">
    thead
    {
        background-color:red;
    }
    tbody
    {
        background-color:green;
    }
    tfoot
    {
        background-color:yellow;
    }
</style>
</head>
<body>
<h1>Tabel dengan menggunakan thead, tbody, tfoot</h1>
<table border="1">
    <thead>
    <tr>
        <th>No</th>
        <th>Nama Barang</th>
        <th>Harga Satuan</th>
        <th>Jumlah</th>
        <th>Total</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Telur</td>
        <td>Rp 1.000</td>
        <td>2</td>
        <td>Rp.2000</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Sawi</td>
        <td>Rp 500</td>
        <td>2</td>
        <td>Rp.1000</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>Total</td>
        <td colspan="4" style="text-align:right;">Rp. 3.000,-</td>
    </tr>
    </tfoot>
</table>
</body>
</html>




silahkan disimpan dengan nama semisal table_thead_tbody_tfoot.html, lalu silahkan buka di browser maka hasilnya adalah sebagai berikut :





thead_tbody_tfoot_table_html




beberapa style dari tabel, antara lain :





  • Headernya berwarna merah karena di css thead kita buat background-color:red;
  • Isi tabel berwarna hijau karena di css tbody kita buat background-color:green;
  • Footer tabel berwarna kuning karena di css tfoot kita buat background-color:yellow;




Tag Colgroup dan Tag col di tabel HTML





Kedua tag ini digunakan untuk mengelompokkan kolom yang anda buat, sehingga memudahkan untuk proses set style CSS di masing – masing kolom.





Secara default jika anda ingin memberikan warna yang berbeda di masing masing kolom, pasti anda harus menuliskan style di masing – masing kolom, tetapi dengan menggunakan kedua tag ini anda dapat dengan mudah memberikan style yang berbeda di masing – masing kolom dengan hanya memberikan style di bagian tag colnya saja.





Bagaimana bingung gak ? baik kita langsung coba buat, beberapa skrip sederhana :





<!DOCTYPE html>
<html>
<head>
   <title>Tabel di HTML</title>
</head>
<body>
<h1>Tabel Menggunakan tag colgroup dan tag col</h1>
<table border="1">
    <colgroup>
        <col style='background-color:green;width:25px;'></col>
        <col style='background-color:orange;width:500px;'></col>
        <col style='background-color:yellow;width:200px;'></col>
    </colgroup>
    <tr>
        <th>No</th>
        <th>Nama</th>
        <th>Kelas</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Aris Samsudin</td>
        <td>3mm3</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Taufik Hidayat</td>
        <td>2mm3</td>
    </tr>
</table>
</body>
</html>




baik semisal kita simpan dengan nama tag_colgroup_tag_col_html.html, lalu silahkan buka di browser, hasilnya adalah seperti ini :





tag_colgroup_tag_col_html




tag_colgroup_tag_col_html




tag_colgroup_tag_col_html




terlihat hasilnya, masing – masing kolom memiliki warna yang berbeda, hal tersebut karena kita menambahkan skrip di baris 10 hingga 12.





  • pada col pertama di berikan background-color:green sehingga kolom akan berwarna hijau, lalu anda juga mengatur ukuran width adalah 25 px
  • pada col kedua diberikan background-color:orange sehingga kolom akan berwarna orange, lalu anda juga mengatur ukuran width adalah 500 px
  • pada col ketiga diberikan background-color:yellow sehingga kolom akan berwarna yellow, lalu anda juga mengatur ukuran width adalah 200 px




gimana mudah kan  ? nah itu fungsi dari tag colgroup dan tag col pada tabel html, anda dapat mengatur masing – masing kolom di dengan hanya mengatur style di masing – masing tag col.





Attribute Rules pada Tabel HTML





Attribute Rules pada tabel digunakan untuk membuat dan mengatur garis yang ada pada di antara cell satu dengan cell lain di tabel, dalam attribute rules html memiliki 4 values antara lain :





  • rows (digunakan untuk menampilkan garis pada bagian baris tabel di html)
  • cols (digunakan untuk menampilkan garis pada bagian kolom tabel di html)
  • all (digunakan untuk menampilkan garis pada bagian baris dan kolom tabel di html)
  • none (digunakan untuk mengatur agar garis pada kolom dan tabel tidak tampil)




baik langsung saja kita coba buat skrip sederhana :





<!DOCTYPE html>
<html>
<head>
   <title>Tabel di HTML</title>
</head>
<body>
<h1>Tabel Menggunakan Attribute rules rows</h1>
<table rules='rows'>
	<tr>
		<th>No</th>
		<th>Nama</th>
		<th>Kelas</th>
    </tr>
    <tr>
        <td>1</td>
		<td>Aris Samsudin</td>
		<td>3mm3</td>
    </tr>
	<tr>
        <td>2</td>
		<td>Taufik Hidayat</td>
		<td>2mm3</td>
    </tr>
</table>

<h1>Tabel Menggunakan Attribute rules cols</h1>
<table rules='cols'>
	<tr>
		<th>No</th>
		<th>Nama</th>
		<th>Kelas</th>
    </tr>
    <tr>
        <td>1</td>
		<td>Aris Samsudin</td>
		<td>3mm3</td>
    </tr>
	<tr>
        <td>2</td>
		<td>Taufik Hidayat</td>
		<td>2mm3</td>
    </tr>
</table>


<h1>Tabel Menggunakan Attribute rules all</h1>
<table rules='all'>
	<tr>
		<th>No</th>
		<th>Nama</th>
		<th>Kelas</th>
    </tr>
    <tr>
        <td>1</td>
		<td>Aris Samsudin</td>
		<td>3mm3</td>
    </tr>
	<tr>
        <td>2</td>
		<td>Taufik Hidayat</td>
		<td>2mm3</td>
    </tr>
</table>

<h1>Tabel Menggunakan Attribute rules none</h1>
<table rules='none' border='1'>
	<tr>
		<th>No</th>
		<th>Nama</th>
		<th>Kelas</th>
    </tr>
    <tr>
        <td>1</td>
		<td>Aris Samsudin</td>
		<td>3mm3</td>
    </tr>
	<tr>
        <td>2</td>
		<td>Taufik Hidayat</td>
		<td>2mm3</td>
    </tr>
</table>
</body>
</html>




semisal nih kita simpan dengan nama attribute_rules_tabel_html.html, lalu simpan dan buka di browser.









nah hasilnya adalah seperti itu, jika anda perhatikan :





  • Pada tabel pertama baris yang ditampilkan di bagian baris karena kita menggunakan values rows pada attribute rules
  • Pada tabel kedua baris yang ditampilkan di bagian kolom karena kita menggunakan values cols pada attribute rules
  • Pada tabel ketiga baris yang ditampilkan adalah bagian kolom dan baris karena kita menggunakan values all pada attribute rules
  • Pada tabel keempat baris yang ditampilkan hanya di bagian luar tabel, karena kita menggunakan values none pada attribute rules, dan kita mengatur bordernya sehingga garisnya berada diluar tabel




Mengatur ukuran lebar pada bagian tabel





Secara default ukuran lebar dari tabel ditentukan dari panjang isi di dalam tabel itu sendiri, jadi lebar tabel akan menyesuaikan, tetapi dari HTML sendiri memiliki attribute yang memang digunakan untuk mengatur ukuran lebar dari tabel.





Attribute width dapat digunakan untuk mengatur ukuran lebar tabel itu sendiri, satuan yang digunakan adalah satuan pixel dan juga persen, attribute width dapat anda gunakan pada beberapa tag antara lain :





  • tag table
  • tag th
  • tag td
  • tag col




baik agar mempermudah anda dalam memahami penggunaan dari attribute width ini silahkan anda tuliskan skrip dibawah :





<!DOCTYPE html>
<html>
<head>
   <title>Tabel di HTML</title>
</head>
<body>
<h1>Tabel Menggunakan Attribute Width di tag table dengan value 600px</h1>
<table border='1' width='600px'>
	<tr>
		<th>No</th>
		<th>Nama</th>
		<th>Kelas</th>
    </tr>
    <tr>
        <td>1</td>
		<td>Aris Samsudin</td>
		<td>3mm3</td>
    </tr>
	<tr>
        <td>2</td>
		<td>Taufik Hidayat</td>
		<td>2mm3</td>
    </tr>
</table>
<h1>Tabel Menggunakan Attribute Width di tag table dengan value 50%</h1>
<table border='1' width='50%'>
	<tr>
		<th>No</th>
		<th>Nama</th>
		<th>Kelas</th>
    </tr>
    <tr>
        <td>1</td>
		<td>Aris Samsudin</td>
		<td>3mm3</td>
    </tr>
	<tr>
        <td>2</td>
		<td>Taufik Hidayat</td>
		<td>2mm3</td>
    </tr>
</table>

<h1>Tabel Menggunakan Attribute Width di tag th</h1>
<table border='1'>
	<tr>
		<th width='10px'>No</th>
		<th width='200px'>Nama</th>
		<th width='150px'>Kelas</th>
    </tr>
    <tr>
        <td>1</td>
		<td>Aris Samsudin</td>
		<td>3mm3</td>
    </tr>
	<tr>
        <td>2</td>
		<td>Taufik Hidayat</td>
		<td>2mm3</td>
    </tr>
</table>

<h1>Tabel Menggunakan Attribute Width di tag td</h1>
<table border='1'>
	<tr>
		<th>No</th>
		<th>Nama</th>
		<th>Kelas</th>
    </tr>
    <tr>
        <td width='10px'>1</td>
		<td width='200px'>Aris Samsudin</td>
		<td width='150px'>3mm3</td>
    </tr>
	<tr>
        <td>2</td>
		<td>Taufik Hidayat</td>
		<td>2mm3</td>
    </tr>
</table>

<h1>Tabel Menggunakan Attribute Width di tag col</h1>
<table border='1'>
	<colgroup>
		<col width='10px'>
		<col width='200px'>
		<col width='150px'>
	</colgroup>
	<tr>
		<th>No</th>
		<th>Nama</th>
		<th>Kelas</th>
    </tr>
    <tr>
        <td>1</td>
		<td>Aris Samsudin</td>
		<td>3mm3</td>
    </tr>
	<tr>
        <td>2</td>
		<td>Taufik Hidayat</td>
		<td>2mm3</td>
    </tr>
</table>


</body>
</html>




semisal kita simpan dengan nama width_tabel_html.html, lalu kita buka di browser maka hasilnya adalah :









nah yang terlihat adalah seperti gambar diatas, keterangannya adalah seperti berikut :





  • Tabel pertama saya menggunakan attribute width di tag table dengan value 600 px maka otomatis tabel akan memiliki ukuran lebar 600 px
  • Tabel kedua saya menggunakan attribute width di tag table hanya saja untuk value saya menggunakan 50% yang otomatis ukuran lebar tabel akan 50 % dari browser karena parent tabel Tersebut adalah tag body yang otomatis menyesuaikan ukuran browser
  • Tabel ketiga menggunakan attribute width yang dipasang di tag th
  • Tabel ketiga menggunakan attribute width yang dipasang di tag td
  • Tabel keempat menggunakan attribute width yang dipasang di tag col




Mengatur Tinggi pada tabel HTML





Setelah di bagian sebelumnya kita sudah mengenal attribute width yang digunakan untuk mengatur lebar tabel di HTML, nah di tutorial kali ini kita akan membahas attribute yang digunakan untuk mengatur dari tinggi tabel HTML, berbeda dengan attribute width yang dapat digunakan di beberapa tag seperti tabel, th, td ataupun col, untuk attribute height hanya bisa digunakan di bagian tag table dan tag tr saja





Untuk satuan yang bisa anda gunakan hanyalah satuan pixel saja, anda tidak dapat menggunakan satuan persen di attribute ini.





baik langsung saja kita buat sebuah skrip sederhana agar kita bisa lebih paham :





<!DOCTYPE html>
<html>
<head>
   <title>Tabel di HTML</title>
</head>
<body>
<h1>Tabel dengan attribute height di bagian tag table</h1>
<table border='1' height='150px'>
	<tr>
		<th>No</th>
		<th>Nama</th>
		<th>Kelas</th>
    </tr>
    <tr>
        <td>1</td>
		<td>Aris Samsudin</td>
		<td>3mm3</td>
    </tr>
	<tr>
        <td>2</td>
		<td>Taufik Hidayat</td>
		<td>2mm3</td>
    </tr>
</table>
<h1>Tabel dengan attribute height di bagian tag tr</h1>
<table border='1'>
	<tr height='30px'>
		<th>No</th>
		<th>Nama</th>
		<th>Kelas</th>
    </tr>
    <tr height='40px'>
        <td>1</td>
		<td>Aris Samsudin</td>
		<td>3mm3</td>
    </tr>
	<tr height='100px'>
        <td>2</td>
		<td>Taufik Hidayat</td>
		<td>2mm3</td>
    </tr>
</table>
</body>
</html>








semisal kita beri nama attribute_height_html.html, lalu kita buka di browser :









nah terlihat kita memiliki 2 tabel, keduanya kita berikan attribute height :





  • tabel 1 kita berikan attribute height pada tag tabel dengan value 150px, hasilnya tabel  memiliki tinggi keseluruhan yaitu 150px
  • tabel 2 kita berikan attribute height pada tag tr dengan nilai yang berbeda sehingga menyebabkan tinggi dari masing – masing baris juga berbeda.




nah bagaimana mudah kan untuk mengatur attribute height di dalam tabel html.





Nah sekian dulu pembahasan mengenai bagaimana cara membuat tabel di HTML serta pembahasan mengenai beberapa attribute dan tag lain yang bisa anda gunakan tabel di HTML, jika ada diskusi bisa di kolom komentar, sampai jumpa di tutorial HTML lainnya.


Tags:

Post a Comment (0)

أحدث أقدم