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 :
- Colspan => digunakan untuk menggabungkan cell dalam 1 baris.
- Rowspan => digunakan untuk menggabungkan cell dalam 1 kolom.
- Border => digunakan untuk menentukan ukuran ketebalan garis pada bingkai table.
- Width => digunakan untuk menentukan lebarnyanya table.
- Align => digunakan untuk menentukan posisi paragraf/definisi. misalnya align="center" berarti paragrafnya akan berada di tengah.
- Tag <b> definisi </b> => digunakan untuk membuat huruf tebal.
- 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).
- 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 :
<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