Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / HTML

Belajar Menciptakan Tabel Pada Html


Tabel yaitu sarana untuk menempatkan info semoga gampang dibaca dan dipahami. Dalam menciptakan suatu tabel, anda juga sanggup mengatur tabel dan juga masing-masing kolomnya dengan memakai atribut ibarat Width, Border, dan lain-lain.

Sebelumnya dalam menciptakan tabel pada HTML, ada beberapa tag-tag yang paling penting diingat yaitu :
  • Tag <table> ... </table> untuk membukus tabel.
  • Tag <tr> ... </tr> untuk menciptakan baris baru.
  • Tag <td> ... </td> untuk menciptakan kolom baru.
Sebagai teladan :
<html>
  <head>
  <title>Contoh Tabel</title>
  </head>
<body>
<table>
  <tr>
  <td>sel 1,1</td>
  <td>sel 1,2</td>
  <td>sel 1,3</td>
  </tr>
  <tr>
  <td>sel 2,1</td>
  <td>sel 2,2</td>
  <td>sel 2,3</td>
  </tr>
  <tr>
  <td>sel 3,1</td>
  <td>sel 3,2</td>
  <td>sel 3,3</td>
  </tr>
</table>
</body>
</html>

Hasilnya :
sel 1,1 sel 1,2 sel 1,3
sel 2,1 sel 2,2 sel 2,3
sel 3,1 sel 3,2 sel 3,3

Anda juga sanggup memberi atribut-atribut yang menyertai pada tabel seperti.
  1. Atribut Border, untuk mengatur ketebalan baris pembatas antar sel-sel dalam tabel.
    2. (Atribut ini hanya sanggup diberikan kepada tag <table>)
    Contoh :
    <html>
         <head>
              <title>Memberi Border</title>
         </head>
    <body>
    <table border="1">
         <tr>
              <td>sel 1,1</td>
           <td>sel 1,2</td>
              <td>sel 1,3</td>
         </tr>
         <tr>
              <td>sel 2,1</td>
              <td>sel 2,2</td>
              <td>sel 2,3</td>
         </tr>
         <tr>
              <td>sel 3,1</td>
              <td>sel 3,2</td>
              <td>sel 3,3</td>
         </tr>
    </table>
    </body>
    </html>

    Hasilnya :

  2. Atribut Width, untuk mengatur lebar tabel.
    3. Contoh :
    <html>
         <head>
              <title>Mengatur Lebar Tabel</title>
         </head>
    <body>
    <table border="1" width="60%">
         <tr>
              <td>sel 1,1</td>
              <td width="50">sel 1,2</td>
              <td>sel 1,3</td>
         </tr>
         <tr>
              <td>sel 2,1</td>
              <td>sel 2,2</td>
              <td>sel 2,3</td>
         </tr>
         <tr>
              <td>sel 3,1</td>
              <td>sel 3,2</td>
              <td>sel 3,3</td>
         </tr>
    </table>
    </body>
    </html>

    Hasilnya :

  3. Atribut Height, untuk mengatur tinggi tabel.
    4. Contoh :
    <html>
         <head>
              <title>Mengatur Tinggi Tabel</title>
         </head>
    <body>
    <table border="1" height="60%">
         <tr>
              <td>sel 1,1</td>
              <td>sel 1,2</td>
              <td>sel 1,3</td>
         </tr>
         <tr>
              <td>sel 2,1</td>
              <td>sel 2,2</td>
              <td>sel 2,3</td>
         </tr>
         <tr>
              <td>sel 3,1</td>
              <td>sel 3,2</td>
              <td>sel 3,3</td>
         </tr>
    </table>
    </body>
    </html>

    Hasilnya :

  4. Atribut Cellspacing, untuk menyatakan jarak antar sel satu dengan yang lainnya.
    5. (Atribut ini hanya sanggup diberikan kepada tag <table>)
    Contoh :
    <html>
         <head>
              <title>Cellspacing</title>
         </head>
    <body>
    <table border="1" cellspacing="20">
         <tr>
              <td>sel 1,1</td>
              <td>sel 1,2</td>
              <td>sel 1,3</td>
         </tr>
         <tr>
              <td>sel 2,1</td>
              <td>sel 2,2</td>
              <td>sel 2,3</td>
         </tr>
         <tr>
              <td>sel 3,1</td>
              <td>sel 3,2</td>
              <td>sel 3,3</td>
         </tr>
    </table>
    </body>
    </html>

    Hasilnya :

  5. Atribut Cellpadding, untuk menyatakan jarak antar isi sel dengan batas dari sel tersebut.
    6. (Atribut ini hanya sanggup diberikan kepada tag <table>)
    Contoh :
    <html>
         <head>
              <title>Cellpadding</title>
         </head>
    <body>
    <table border="1" cellpadding="20">
         <tr>
              <td>sel 1,1</td>
              <td>sel 1,2</td>
              <td>sel 1,3</td>
         </tr>
         <tr>
              <td>sel 2,1</td>
              <td>sel 2,2</td>
              <td>sel 2,3</td>
         </tr>
         <tr>
              <td>sel 3,1</td>
              <td>sel 3,2</td>
              <td>sel 3,3</td>
         </tr>
    </table>
    </body>
    </html>

    Hasilnya :

  6. Atribut Rowspan, untuk menggabungkan beberapa buah baris menjadi satu.
    7. (Atribut ini hanya sanggup diberikan kepada tag <td>)
    Contoh :
    <html>
         <head>
              <title>Rowspan</title>
         </head>
    <body>
    <table border="1">
         <tr>
              <td>sel 1,1</td>
              <td>sel 1,2</td>
              <td rowspan="2">sel 1,3</td>
         </tr>
         <tr>
              <td>sel 2,1</td>
              <td rowspan="2">sel 2,2</td>
         </tr>
         <tr>
              <td>sel 3,1</td>
              <td>sel 3,2</td>
         </tr>
    </table>
    </body>
    </html>

    Hasilnya :

  7. Atribut Colspan, untuk menggabungkan beberapa kolom menjadi satu.
    8. (Atribut ini hanya sanggup diberikan kepada tag <td>)
    Contoh :
    <html>
         <head>
              <title>Colspan</title>
         </head>
    <body>
    <table border="1">
         <tr>
              <td>sel 1,1</td>
              <td colspan="2">sel 1,2</td>
         </tr>
         <tr>
              <td>sel 2,1</td>
              <td>sel 2,2</td>
              <td>sel 2,3</td>
         </tr>
         <tr>
              <td colspan="3">sel 3,1</td>
         </tr>
    </table>
    </body>
    </html>

    Hasilnya :

  8. Atribut Bgcolor, untuk memperlihatkan warna pada tabel.
    9. Contoh :
    <html>
         <head>
              <title>Bgcolor</title>
         </head>
    <body>
    <table border="1" width="60%" bgcolor="blue">
         <tr bgcolor="green">
              <td>sel 1,1</td>
              <td>sel 1,2</td>
              <td>sel 1,3</td>
         </tr>
         <tr>
              <td>sel 2,1</td>
              <td bgcolor="red">sel 2,2</td>
              <td>sel 2,3</td>
         </tr>
         <tr>
              <td>sel 3,1</td>
              <td>sel 3,2</td>
              <td>sel 3,3</td>
         </tr>
    </table>
    </body>
    </html>

    Hasilnya :


Semoga yang aku berikan ini sanggup bermanfaat bagi anda yang belum paham.
Saran saya, belajarlah atau sering-seringlah latihan, alasannya yaitu koding HTML sulit dipahami untuk pemula.

Demikian artikel ini aku buat.
Terima Kasih!
Sumber https://ferygg.blogspot.com/

Anda mungkin menyukai postingan ini :