Cara Membuat Tabel Simple Didalam Artikel

Tabel merupakan susunan data dalam baris dan kolom, atau mungkin dalam struktur yang lebih kompleks. Tabel banyak digunakan dalam komunik...

Tabel merupakan susunan data dalam baris dan kolom, atau mungkin dalam struktur yang lebih kompleks. Tabel banyak digunakan dalam komunikasi, penelitian, dan analisis data. Tabel sering muncul muncul di media cetak, tulisan, perangkat lunak komputer, arsitektur hiasan, rambu lalu lintas, dan lain-lain.

Berikut Kode-nya

1.Tabel Simple

First Name	Last Name	Age
Riko	.com	17
Maelano	.com	18
Okir	.com	19

Kode:

<table style="border-collapse: collapse; border: 1px solid black; color: black; text-align: left; width: 300px;"><tbody>
<tr><th style="border-collapse: collapse; border: 1px solid black; padding: 5px; text-align: left;"><div style="text-align: center;">
Firstname</div>
</th><th style="border-collapse: collapse; border: 1px solid black; padding: 5px; text-align: left;"><div style="text-align: center;">
Lastname</div>
</th><th style="border-collapse: collapse; border: 1px solid black; padding: 5px; text-align: left;"><div style="text-align: center;">
Age</div>
</th></tr>
<tr><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
Riko</div>
</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
.com</div>
</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
17</div>
</td></tr>
<tr><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
Maelano</div>
</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
.com</div>
</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
18</div>
</td></tr>
<tr><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
Okir</div>
</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
.com</div>
</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
19</div>
</td></tr>
</tbody></table>

2.Tabel Berwarna

Firstname	Lastname	Age
Riko	.com	17
Maelano	.com	18
Okir	.com	19

Kode:

<table id="t01" style="background-color: pink; border-collapse: collapse; border: 1px solid black; color: black; text-align: left; width: 300px;"><tbody>
<tr><th style="border-collapse: collapse; border: 1px solid black; padding: 5px; text-align: left;"><div style="text-align: center;">
Firstname</div>
</th><th style="border-collapse: collapse; border: 1px solid black; padding: 5px; text-align: left;"><div style="text-align: center;">
Lastname</div>
</th><th style="border-collapse: collapse; border: 1px solid black; padding: 5px; text-align: left;"><div style="text-align: center;">
Age</div>
</th></tr>
<tr><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">Riko</span></b></td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">.com</span></b></td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">17</span></b></td></tr>
<tr><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">Maelano</span></b></td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">.com</span></b></td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">18</span></b></td></tr>
<tr><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">Okir</span></b></td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">.com</span></b></td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">19</span></b></td></tr>
</tbody></table>

3.Tabel Catur

Nama	Marga	Kota
Riko	.com	Pemalang
Maelano	.com	Bogor
Okir	.com	Bandung
Riko	.net	Pemalang
Maelano	.net	Bogor
Okir	.net	Bandung

Kode:

<table style="border-collapse: collapse; color: black; font-family: arial, sans-serif; width: 323px;"><tbody>
<tr><th style="border: 1px solid rgb(221, 221, 221); padding: 8px; text-align: left;">Nama</th><th style="border: 1px solid rgb(221, 221, 221); padding: 8px; text-align: left;">Marga</th><th style="border: 1px solid rgb(221, 221, 221); padding: 8px; text-align: left;">Kota</th></tr>
<tr style="background-color: #dddddd;"><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Gendri</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">.com</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Pemalang</td></tr>
<tr><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Meigy</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">.com</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Bogor</td></tr>
<tr style="background-color: #dddddd;"><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Milano</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">.com</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Bandung</td></tr>
<tr><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Gracia</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">.net</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Pemalang</td></tr>
<tr style="background-color: #dddddd;"><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Evan</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">.net</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Bogor</td></tr>
<tr><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Celona</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">.net</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Bandung</td></tr>
</tbody></table>