Sabtu, 12 Oktober 2013

Sulthan Fa's Blog: Cara Menggunakan Tabel di HTML

Maaf ne gan kalau jarang posting, coz banyak tugas sekolah n tau sendirikan internet di indo seperti apa (-_-". Kali ne, saya akan postingkan artikel tentang 'Menggunakan Tabel di HTML'. Langsung aja deh ya ke TKP.

Menggunakan Tabel di HTML

  • Menciptakan Tabel
          Tag     <table> ... </table>
                     <caption> ... </caption>  =>  Untuk memberikan judul pada tabel
                     <tr> ... </tr>  =>  Untuk menciptakan baris (table row)
                     <td> ... </td>  =>  Untuk menciptakan kolom (table coloum)
                     <th> ... </th>  =>  Untuk menciptakan judul pada tabel (table header)
  • Memberi Garis Pada Tabel
          <table border = 1>
                        |
                        |
                        |
                        |
          </table>

           Contoh: <body>
                         <table border = 1>
                         <caption>Data Siswa</caption>
                         <tr>
                                <th>No</th>
                                <th>Nama</th>
                                <th>NIS</th>
                         </tr>
                         <tr>
                                <td>1</td>
                                <td>Adi</td>
                                <td>0049</td>
                         </tr>
                         <tr>
                                <td>2</td>
                                <td>Bella</td>
                                <td>0127</td>
                         </tr>
                         </table>
                         </body>
                      Jadinya seperti gambar berikut:

No
Nama
NIS
1
Adi
0049
2
Budi
0127



  • Menambah Warna Latarbelakang Tabel
           Tag     <bgcolor="...">
                      Atau
                      <bgcolor=(kodewarna)>

           Contoh: <body>
                         <table border = 1 bgcolor="red">
                         <caption>Data Siswa</caption>
                         <tr>
                                <th>No</th>
                                <th>Nama</th>
                                <th>NIS</th>
                         </tr>
                         <tr>
                                <td>1</td>
                                <td>Adi</td>
                                <td>0049</td>
                         </tr>
                         <tr>
                                <td>2</td>
                                <td>Bella</td>
                                <td>0127</td>
                         </tr>
                         </table>
                         </body>

                      Jadinya seperti gambar berikut:

No
Nama
NIS
1
Adi
0049
2
Budi
0127


  • Menggabungkan Sel
           Tag     <colspan>  =>  Untuk menggabungkan kolom
                      <rowspan>  =>  Untuk menggabungkan baris
 
           Contoh: <body>
                         <table border = 1>
                         <caption>Data Siswa</caption>
                         <tr>
                                <th>No</th>
                                <th colspan=2 align="center">Nama</th>
                         </tr>
                         <tr>
                                <td rowspan=2 align="center">1</td>
                                <td>Adi</td>
                                <td>0049</td>
                         </tr>
                         <tr>
                                <td>Bella</td>
                                <td>0127</td>
                         </tr>
                         </table>
                         </body>

                      Jadinya seperti gambar berikut:

No
Nama
1
Adi
0049
Budi
0127


Pada posting kali ini, saya kira cuma itu aja yang akan saya share ke temen2 semua. Semoga bermanfaat. Terima kasih telah membaca artikel saya dan terima kasih juga telah mampir ke blog saya. See u next time ^,^..