Membuat Table Pada Blog Post

Artikel ini membahas tentang Membuat Table Pada Blog Post. Selamat membaca.

Untuk mengatur tabel, maka pertama-tama Anda harus menetapkan jumlah baris dan kolom. Biasanya yang sulit untuk memahami markup tabel pada html yang mengandaikan garis tabel deskripsi demi baris.

Contoh markup tabel:
<table> </table> - pembuka dan penutup tabel.
<tr> </tr> - pembuka dan penutup baris pada tabel.
<td> </td> - pembuka dan penutup sel pada tabel.

Dengan kode script: 

<table>
<tbody>
<tr>
<td> 1 cell</td>
<td> 2 cell</td>
</tr>
</tbody>
</table>

Hasilnya:

1 cell

2 cell

Contoh kode script berikutnya: 

<table>
<tbody>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
<tr>
<td>cell 7</td>
<td>cell 8</td>
<td>cell 9</td>
</tr>
</tbody>
</table>

Hasilnya:

cell 1	cell 2	cell 3
cell 4	cell 5	cell 6
cell 7	cell 8	cell 9

Untuk menyatukan dua baris atau dua kolom sel pada tabel maka harus menambahkan:
colspan - untuk menyatukan kolom sel
rowspan - untuk menyatukan baris sel

Contoh kode script: 

<table border="1">
<tbody>
<tr>
<td colspan="2">cell 1</td>
<td>cell 1</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
<td rowspan="2">cell 5</td>
</tr>
<tr>
<td>cell 6</td>
<td>cell 7</td>
</tr>
</tbody>
</table>

Hasilnya:

cell 1		cell 1
cell 3	cell 4	cell 5
cell 6	cell 7

Untuk menginput teks dalam tabel Anda bisa mengaturnya dengan menggunakan kode script:
align - untuk mengatur teks secara horizontal.
valign - untuk mengatur teks secaravertical.

Contoh kode script: 

<table border="1">
<tbody>
<tr>
<td colspan="2" align="center">cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
<td rowspan="2" valign="top"> cell 5</td>
</tr>
<tr>
<td>cell 6</td>
<td>cell 7</td>
</tr>
</tbody>
</table>

Hasilnya:

cell 1		cell 2
cell 3	cell 4	cell 5
cell 6	cell 7

Dengan memberikan nilai khusus pada border tabel maka akan menghasilkan bentuk border tabel tertentu.

Contoh kode script: 

<table border="5">
<tbody>
<tr>
<td colspan="2" align="center">cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
<td rowspan="2" valign="top"> cell 5</td>
</tr>
<tr>
<td>cell 6</td>
<td>cell 7</td>
</tr>
</tbody>
</table>

Hasilnya:

cell 1		cell 2
cell 3	cell 4	cell 5
cell 6	cell 7

Jika nilai border ="0", maka hasilnya seperti di bawah ini:

cell 1		cell 2
cell 3	cell 4	cell 5
cell 6	cell 7

Demikian pembahasan tentang  Membuat Table Pada Blog Post. Selamat mencoba dan semoga berhasil.