Cara bikin table HTML di blog

Cara bikin table HTML di blog

Bikin table di blog caranya mudah saja. Pertama siapkan datanya dulu yang mau dimasukan ke dalam table. Sebagai contoh kita akan memasukan data mobil dibawah ini. Kali ini kita akan memasukannya kedalam side bar diblog agar tulisan tampil rapi. Inilah langkah kesatu Cara bikin table HTML di blog Xenia Avanza Innova Pregio Travelo Elf 12 Elf 14 Elf 17 Elf Long 10 Elf Long 12 Elf Long 14 Elf Long 17 Elf Long 18 Elf Long 19 Medium Bus 27 Medium Bus 29 Medium Bus 30 Medium Bus 31 Medium Bus 33 Big Bus 47 Big Bus 59 Big Bus 65 Langkah kedua Cara bikin table HTML di blog siapkan tabel nya. Tabel HTML dibawah ini kita susun untuk empat kolom kesamping dan lima baris kebawah. Anda bisa bikin sesuai dgn kebutuhan anda sendiri

Xenia	Avanza	Innova	Pregio
Travelo	Elf 12	Elf 14	Elf 17
Elf Long 10	Elf Long 12	Elf Long 14	Elf Long 17
Elf Long 18	Elf Long 19	Medium Bus 27	Medium Bus 29
Medium Bus 30	Medium Bus 31	Medium Bus 33	Big Bus 47
Big Bus 59	Big Bus 65	Big Bus Premium	Big Bus Lux

Untuk menghasilkan tabel spt diatas maka kode nya adalah sebagai berikut:

<table border="1">     <tr>         <td>Xenia</td>         <td>Avanza</td>         <td>Innova</td>         <td>Pregio</td>     </tr>     <tr>         <td>Travelo</td>         <td>Elf 12</td>         <td>Elf 14</td>         <td>Elf 17</td>     </tr>     <tr>         <td>Elf Long 10</td>         <td>Elf Long 12</td>         <td>Elf Long 14</td>         <td>Elf Long 17</td>     </tr>     <tr>         <td>Elf Long 18</td>         <td>Elf Long 19</td>         <td>Medium Bus 27</td>         <td>Medium Bus 29</td>     </tr>     <tr>         <td>Medium Bus 30</td>         <td>Medium Bus 31</td>         <td>Medium Bus 33</td>         <td>Big Bus 47</td>         <td>Big Bus 59</td>         <td>Big Bus 65</td>         <td></td>     </tr> </table>

Langkah ketiga  masukan kedalam postingan. Dan tabel pun sudah selesai kita buat. Cukup mudah bukan, makanya langsung praktekin aja oke. Kalo ada yang masih ga ngerti juga??? ya cari aja diblog tetangga banyak juga tuh heheee. Mari belajar Cara bikin table HTML di blog Selain itu bisa juga dgn cara yg lebih mudah yaitu copy paste dari excel trus paste di compose. Selesai langsung simpan langsung jadi

Data 1	Data 2	Data 3	Data 4
Kolom 1 Baris 1	Kolom 2 Baris 1	Kolom 3 Baris 1	Kolom 4 Baris 1
Kolom 1 Baris 2	Kolom 2 Baris 2	Kolom 3 Baris 2	Kolom 4 Baris 2
Kolom 1 Baris 3	Kolom 2 Baris 3	Kolom 3 Baris 3	Kolom 4 Baris 3
Kolom 1 Baris 4	Kolom 2 Baris 4	Kolom 3 Baris 4	Kolom 4 Baris 4
Kolom 1 Baris 5	Kolom 2 Baris 5	Kolom 3 Baris 5	Kolom 4 Baris 5

Atau cara lainya lagi dgn tableizer yang hasilnya spt ini:

Data 1	Data 2	Data 3	Data 4
Kolom 1 Baris 1	Kolom 2 Baris 1	Kolom 3 Baris 1	Kolom 4 Baris 1
Kolom 1 Baris 2	Kolom 2 Baris 2	Kolom 3 Baris 2	Kolom 4 Baris 2
Kolom 1 Baris 3	Kolom 2 Baris 3	Kolom 3 Baris 3	Kolom 4 Baris 3
Kolom 1 Baris 4	Kolom 2 Baris 4	Kolom 3 Baris 4	Kolom 4 Baris 4
Kolom 1 Baris 5	Kolom 2 Baris 5	Kolom 3 Baris 5	Kolom 4 Baris 5

Kode:

<style type="text/css">
    table.tableizer-table {
    border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif
    font-size: 12px;
}
.tableizer-table td {
    padding: 4px;
    margin: 3px;
    border: 1px solid #ccc;
}
.tableizer-table th {
    background-color: #104E8B;
    color: #FFF;
    font-weight: bold;
}
</style><table class="tableizer-table">
<tr class="tableizer-firstrow"><th>Data 1</th><th>Data 2</th><th>Data 3</th><th>Data 4</th></tr>
 <tr><td>Kolom 1 Baris 1</td><td>Kolom 2 Baris 1</td><td>Kolom 3 Baris 1</td><td>Kolom 4 Baris 1</td></tr>
 <tr><td>Kolom 1 Baris 2</td><td>Kolom 2 Baris 2</td><td>Kolom 3 Baris 2</td><td>Kolom 4 Baris 2</td></tr>
 <tr><td>Kolom 1 Baris 3</td><td>Kolom 2 Baris 3</td><td>Kolom 3 Baris 3</td><td>Kolom 4 Baris 3</td></tr>
 <tr><td>Kolom 1 Baris 4</td><td>Kolom 2 Baris 4</td><td>Kolom 3 Baris 4</td><td>Kolom 4 Baris 4</td></tr>
 <tr><td>Kolom 1 Baris 5</td><td>Kolom 2 Baris 5</td><td>Kolom 3 Baris 5</td><td>Kolom 4 Baris 5</td></tr>
</table>