Cara membuat tabel dengan html dan css di blog
Tabel dari html dan css di blog-Sebuah konten artikel di blog beberapa komponen yang pasti ada adalah gambar dan tulisan. Tetapi ada kalanya seorang konten kreator blog membubuhkan komponen, tabel contohnya. Membuat tabel di blog sangatlah berbeda dengan membuat tabel di aplikasi microsoft. Hal ini dikarenakan dalam proses pembuatan tabel di blog diperlukan bahasa HTML dan CSS agar menghasilkan kombinasi tabel yang baik.
Karena itu pada artikel kali ini saya akan membagikan tutorial cara membuat tabel di html blog. Dan sebagai tambahan, sebuah tabel HTML tanpa CSS mungkin kurang indah, karenanya kita perlu membuat tampilan tabel dengan CSS. Agar tabel yang Anda buat lebih berwarna. Cara membuat tabel HTML berwarna bisa Anda lihat artikel dibawah ini.
Pengertian HTML
HTML adalah kependekan dari Hypertext Markup Language yang memiliki arti sebuah bahasa markah standar untuk dokumen yang dirancang dan ditampilkan pada peramban internet. Singkatnya HTML adalah bahasa pemrograman standar, bisa Anda temui bahasa ini pada struktur website dan blog. Karena itu, sangat disarankan bagi seorang blogger memahami pola dasar dari HTML agar lebih mudah nantinya ketika melakukan penyuntingan template atau theme blog.
Pengertian CSS
CSS merupakan kependekan dari Cascading Style Sheet yang memiliki arti aturan untuk mengatur komponen dalam sebuah web sehingga aka lebih terstruktur dan seragam. Agar lebih mudah dipahami CSS ini merupakan bahasa pakaian atau tampilan dari web. Pada bahasa ini kita bisa mengatur posisi tabel dengan CSS. Selain itu membuat tabel responsive dengan css juga bisa Anda lakukan.
Tabel dengan bahasa html
Biasanya saat membuat tabel, Anda pasti menggunakan ms word atau ms excel. Tetapi ketika Anda ingin membuat tabel di platform blogger atau wordpress, membuat tabel tidak sesederhana di kedua aplikasi microsoft tersebut. Walaupun masih bisa meng-copy tabel di ms word dan ms excel lalu mem-pastenya secara langsung di blog, tetapi hasil dari tabel yang hanya copy dan paste seringkali kurang sempurna dan banyak kekurangan. Untuk itu, ketika Anda ingin membuat tabel di blog gunakanlah script html dan css agar tabel di postingan Anda terlihat lebih bagus.
Fungsi tabel pada postingan artikel
Membuat tabel pada artikel memiliki beberapa fungsi yang bisa Anda manfaatkan, diantaranya adalah sebagaimana dibawah ini.
- Mengklasifikasikan data. Salah satu alasan dibuatnya tabel adalah untuk membuat klasifikasi data yang dibagi menggunakan kolom. Hal ini sangat membantu pembaca untuk melihat data sesuai dengan klasifikasinya. Dalam pengolahan data untuk bisnis, tabel merupakan salah satu instrumen yang paling sering digunakan.
- Menjabarkan informasi. Setiap orang memiliki cara yang berbeda-beda untuk menjelaskan informasi. Ketika ingin menjelaskan informasi berbasis data dan angka, salah satu format terbaik untuk menyampaikannya adalah dengan membuat tabel. Karena pada tabel informasi yang termuat lebih tertata dan mudah untuk dimengerti pembaca.
- Memperkuat tulisan. Sebuah artikel akan lebih kuat tulisannya jika ada fakta dan data. Penyampaian data dan fakta bisa dilakukan dengan berbagai cara, salah satunya adalah dengan membuat tabel. Jenis tabel yang dibuat pada artikel blog tentu menggunakan bahasa html, karena itu pada artikel ini saya akan membagikan cara membuat tabel dengan html di blogger.
Cara membuat tabel dengan html di blogger dan wordpress
Anda bisa membuat tabel pada artikel blog dengan script html yang saya bagikan dibawah ini.
<table border="1" cellpadding="10">
<tr>
<td>Baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>Baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
Untuk menggunakannya pada posingan artikel blog, Anda perlu membuka format tulis html pada platform blogger atau wordpress.
Selain cara diatas Anda juga bisa membuat tabel html yang dikombinasikan dengan css sehingga hasil akhir dari tabel yang dibuat-pun lebih variatif. Berikut ini tutotial mengkombinasikan tabel html dengan css.
1. Langkah pertama yang perlu Anda lakukan adalah dengan memasang kode css dibawah ini antara kode <head> sampai </head>
/*design table 1*/
.table1 {
font-family: sans-serif;
color: #232323;
border-collapse: collapse;
}
.table1, th, td {
border: 1px solid #999;
padding: 8px 20px;
}
2. Jika sudah, maka selanjutnya buat tabel dengan kode html dibawah ini pada artikel Anda. Jangan lupa, ketika memasang script tabel html Anda perlu mengubah tampilan HTML pada blog, seperti yang sudah saya contohkan diatas.
<table class="table1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Usia</th>
</tr>
<tr>
<td>1</td>
<td>Andi Saputra</td>
<td>Magelang</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>Budi Budiman</td>
<td>Jakarta</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>Calvin Sanusi</td>
<td>Malang</td>
<td>29</td>
</tr>
<tr>
<td>4</td>
<td>Diki</td>
<td>Bandung</td>
<td>24</td>
</tr>
<tr>
<td>5</td>
<td>Malas Ngoding</td>
<td>Medan</td>
<td>23</td>
</tr>
</table>
3. Setelah itu taruh script diatas dan sesuaikan baris dan kolom sesuai kebutuhan Anda. Bagi Anda yang ingin mendapatkan variasi css untuk tabel dengan format lain, Anda bisa mendapatkannya pada artikel malasngoding[dot]com. Script diatas juga saya dapatkan dari artikel malasngoding.
Hasil akhir dari script tabel html dan css diatas adalah sebagaimana gambar tersebut. Tentu hasil dari css dan html diatas sangat sederhana. Anda bisa menambahkan warna, menyunting padding, bold dan lain sebagainya dengan mendalami bahasa html dengan css.
Kesimpulan
Dapat disimpulkan untuk membuat tabel html di blog Anda perlu memahami dasar-dasar penulisan bahasa html atau paling tidak mengerti polanya, sehingga jika Anda ingin menyunting script html maka Anda tidak kesulitan. Saya pikir itu saja artikel
Post a Comment for "Cara membuat tabel dengan html dan css di blog"