Saturday, August 17, 2019

Cara Membuat Tabel Simple Didalam Artikel

Diposting oleh Sindy di 9:54 PM Label:

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.com17
Maelano.com18
Okir.com19
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
NamaMargaKota
Riko.comPemalang
Maelano.comBogor
Okir.comBandung
Riko.netPemalang
Maelano.netBogor
Okir.netBandung
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>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)