Selasa, 26 April 2016

Cara buat responsive table untuk blog

Kenapa perlu table responsif untuk artikel blog.

Di dalam penghasilan sesetengah artikel di dalam blog kadangkala penggunaan table (bukan spesis meja makan) adalah perlu supaya segala maklumat, data atau statistik tertentu dapat disampaikan kepada pembaca dengan cara yang kemas, teratur dan menarik. Cara tradisional yang memerlukan penulis untuk menggunakan kod html, css dan javascript mungkin agak susah terutama bagi mereka yang kurang mahir dalam aspek tersebut.

Definition of: HTML table. An HTML structure for creating rows and columns on a Web page. The Table tag defines the overall table and the Table Row (TR) tag is used to build each row. The TableData (TD) tag defines the actual data.

Penyelesaian kepada masalah.

Jalan terbaik adalah dengan menggunakan tablesgenerator online. Ianya mudah dan senang digunakan tanpa sebarang bayaran. Apa yang menariknya lagi ialah table yang dihasilkan boleh diubah tetapannya kepada jenis responsive yang bermaksud ianya akan berubah saiz mengikut saiz paparan skrin pada peranti pengguna.

Contoh paparan table pada skrin laptop.



Contoh paparan table pada skrin smartphone.



Cara cara untuk membuat.

Langkah 1: 

Pergi ke www.tablesgenerator.com dan klik pada HTML Tables, seterusnya klik pada File dan pilih New table. Anda akan diminta untuk memasukkan bilangan Rows (baris melintang) dan juga
Columns (baris menegak) yang sesuai dengan table yang akan dibuat, kemudian tekan Create.


Langkah 2:

Masukkan segala maklumat atau data yang dikehendaki dengan klik sebanyak dua kali (double click) pada petak tersebut. Jika bilangan Rows table yang dibuat tidak mencukupi, tambahkannya dengan right click pada nombor 1, 2, 3 di sebelah kiri table. Begitu juga dengan bilangan Columns, right click pada huruf A, B, C di bahagian atas table.


Langkah 3:

Bagi mengemaskan lagi table yang telah siap, anda boleh mengubah text alignment, cell font, text font, text colour, table background colour dan theme mengikut citarasa. Gunakan fungsi Undo dan Repeat dalam menu Edit seandainya terjadi sebarang kesilapan. Setelah berpuas hati, klik butang Generate.


Langkah 4:

Setelah selesai langkah yang ketiga, pergi ke menu Extra options dan tukarkan tetapan Layout dengan klik pada Center table horizotally, Enable table sorting atau Make table responsive. Uji dahulu table yang telah siap dengan klik pada butang Preview. Akhir sekali klik Copy to clipboard dan salin (paste) kod tersebut ke dalam ruangan html artikel blog.


Tip bonus.

Harus diingat bahawa kod table yang anda salin mengandungi html, css dan javascript jika ketiga tiga fungsi Layout diaktifkan, saya sarankan agar anda guna gambar Print screen (Tekan kekunci logo Window dan PrtSc untuk window 10 ) semasa melakukan proses Preview untuk meringankan page loading artikel bog tersebut. Maksudnya gantikan kod table dengan gambar print screen.


Adakah artikel ini membantu ?


Ya  smile

Tidak frown
Other
Please Specify:









Terima kasih di atas kesudian anda untuk menjengah ke blog ini. Semua komen akan disemak terlebih dahulu sebelum dipaparkan pada ruangan komen oleh admin. Harap maklum.

favourite category

...
test section describtion

Butang Whatsapp hanya berfungsi pada peranti smartphone