Cara Membuat 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

Categories : html

Blog Community - SEO, Adsense, Teknologi, Binis Online, Web