Cara buat jadual menggunakan HTML tanpa plugin

Kalau anda sedar, perkongsian kod negeri kelahiran dan perkongsian yang menceritakan tentang MUET, menggunakan jadual. Buat jadual ni lebih memudahkan dan lebih tersusun dalam menyenaraikan sesuatu data. Yang menariknya, cara buat jadual ni hanya menggunakan HTML, tidak perlu menggunakan plugin.

Kenapa dengan menggunakan jadual data tersusun tu, saya rasa tidak perlu diterangkan lagi. Di sini, saya cuma nak kongsikan kenapa ia memudahkan. Bagi pengguna wordpress (blogspot, tak cuba lagi), dalam html editor saya dah susah nak susun data supaya tersusun tapi tak boleh.

Jadi saya terpaksa menggunakan visual editor, dalam visual editor, saya terpaksa tekan space banyak kali, save, preview, cuba lagi kalau belum tersusun. Penggunaan tab dalam editor tak boleh. Jadi perkara ni amat menyusahkan dan membuang masa, tambahan pula internet saya lambat.

Jadi dengan menggunakan html, kita boleh buat jadual dengan mudah dan tersusun.

Sebenarnya dah lama saya cuba cari cara buat jadual ni, tapi kebanyakkannya menggunakan plugin. Saya kalau boleh, cuba kurangkan penggunaan plugin. Yang lawaknya, saya tengah cari benda lain, benda yang saya cari dari dulu pula saya jumpa.

Jadi sebelum tu, saya ingin mengucapkan terima kasih kepada blog HTML Tips yang menunjukkan tips html untuk membuat jadual.

Cara buat jadual menggunakan HTML tanpa plugin?

Caranya mudah saja, keluaran kod html tu nanti akan jadi begini.

[html]<table style=”text-align: center; width: 100%;” border=”1″>
<tbody>
<tr>
<td style=”vertical-align: top;”>Jadual 1</td>
<td style=”vertical-align: top;”> Jadual 2</td>
</tr>
<tr>
<td style=”vertical-align: top;”> Jadual 3</td>
<td style=”vertical-align: top;”>Jadual 4</td>
</tr>
</tbody>
</table>[/html]

Anda boleh copy paste kod html di atas. Untuk penerangan :

[html]text-align: center[/html]

Anda boleh ubah “center” jadi “left” atau “right” untuk align tulisan anda semua sekaligus. Kalau anda mahukan tulisan ada align tengah dan kiri, anda kena menambah kod ni text-align: center; dimengikut tulisan yang anda mahu align kiri, tengah ataupun kanan.

[html]<td></td>[/html]

Kalau anda hendak menambah jadual menegak, anda cuma perlu tambah kod ini. [html]<td style=”vertical-align: top;”>Jadual 4</td>[/html] mengikut jadual menegak yang anda mahukan.

[html]width: 100%[/html]

Anda boleh menukar kelebaran jadual anda. 100% bermaksud, jadual tu mengikut 100% kelebaran untuk post anda.

[html]border=”1″[/html]

Anda boleh juga menukar border jadual anda dengan menukar nombor tiga tersebut. Bagi pengguna wordpress, lebih baik gunakan CSS.

Sebenarnya saya pelik ni tak dapat nak buat garisan melintang untuk yang paling atas. Dah cuba, tapi tak dapat. Yang peliknya, dalam visual editor menunjukkan jadual yang penuh seperti gambar di bawah.

Tapi keluaran dalam post, jadi begini pula.

Kedua-dua gambar tiada garisan di atas. Kemungkinan ia mengikut tema, saya belum cuba di tema berlainan.

Saya buat perkongsian ini dalam kategori blogging blogspot tapi banyak cerita tentang wordpress sebab ini tips HTML, tidak kira blogspot ataupun wordpress boleh gunakan trik ni.

Itu saja perkongsian saya, selamat mencuba.