Selasa, 22 Maret 2016

Membuat Table dengan HTML


Cara membuat table di HTML, kita membutuhkan setidaknya 3 tag yaitu : tag <table> definisi </table>, tag <tr> definisi </tr>, dan tag <td> definisi </td>.

  • Tag <table> digunakan untuk memulai table.
  • Tag <td> adalah singkatan dari table data,  tag untuk penanda kolom. Dignakan untuk menginput data ke table.
  • Tag <tr> adalah singkatan dari table row, tag untuk penanda baris. Digunakan untuk membuat baris dari table.
Ada beberapa atribut yang bisa kita gunakan dalam tag table yaitu :
  1. Colspan => digunakan untuk menggabungkan cell dalam 1 baris.
  2. Rowspan => digunakan untuk menggabungkan cell dalam 1 kolom.
  3. Border => digunakan untuk menentukan ukuran ketebalan garis pada bingkai table.
  4. Width => digunakan untuk menentukan lebarnyanya table.
  5. Align => digunakan untuk menentukan posisi paragraf/definisi. misalnya align="center" berarti paragrafnya akan berada di tengah.
  6. Tag <b> definisi </b> => digunakan untuk membuat huruf tebal.
  7. Font size => digunakan untuk menentukan besarnya huruf, misal font size="6" berarti ukuran fontnya akan sesuai yang ditulis (semakin kecil ukuran levelnya semakin kecil juga ukuran hurufnya).
  8. Tag Heading <h1> => digunakan untuk membuat judul dari paragraf, atau bagian dari text yang merupakan judul.
Contoh membuat table dengan HTML

<h1><font size="5">Data NIlai Mahasiswa</font></h1>
<table border="2" width="400px">
<tr align="center">
  <td rowspan="2"><b>NO</b></td>
  <td rowspan="2"><b>Nama Mahasiswa</b></td>
  <td colspan="2"><b>Nilai Tugas</b></td>
</tr>
<tr align="center">
  <td><b>1</b></td>
  <td><b>2</b></td>
</tr>
<tr>
  <td align="center">1</td>
  <td>Bonaventura</td>
  <td align="center">70</td>
  <td align="center">80</td>
</tr>
<tr>
  <td align="center">2</td>
  <td>Romagnoli</td>
  <td align="center">70</td>
  <td align="center">90</td>
</tr>
<tr>
  <td align="center">3</td>
  <td>Bartolaci</td>
  <td align="center">90</td>
  <td align="center">50</td>
</tr>
<tr>
  <td align="center">4</td>
  <td>Antoneli</td>
  <td align="center">90</td>
  <td align="center">60</td>
</tr>
<tr>
 <td colspan="2"><b>Rata - rata</b></td>
 <td align="center"><b>80</b></td>
 <td align="center"><b>70</b></td>
</tr>
</table>

Print Outputnya :

Tidak ada komentar:

Posting Komentar