Mulai Membuat Tabel Sederhana dalam HTML

Tabel HTML sejauh ini merupakan salah satu pernyataan HTML terbaik yang pernah dibuat. Kemampuan untuk memformat halaman web dengan pernyataan tabel luar biasa! Pelajari mereka, gunakan mereka, dan cintai mereka!

Tabel Dasar:

Mari kita ambil daftar belanjaan kita yang kita gunakan dalam tutorial daftar dan membuatnya menjadi tabel kali ini. Kami akan menempatkan item di kolom pertama dan harga di kolom kedua.

Ini adalah kode yang membuatnya terjadi. Kode sebenarnya ada di sebelah kiri dan deskripsi bahasa Inggris ada di sebelah kanan. Deskripsi dibuat menjorok untuk menunjukkan “struktur” pernyataan tabel.

Bingung? Oke, mari kita lihat tabel di atas. Tabel ini sebenarnya cukup sederhana. Anda membuat tabel dengan cara yang sama seperti Anda membaca buku; dari kiri ke kanan dan dari atas ke bawah. Tabel dimulai dengan tag <table> dan diakhiri dengan tag </table> . Setiap baris dimulai dengan tag <tr> dan diakhiri dengan tag </tr> . Setiap bagian dari data tabel dimulai dengan tag <td> dan diakhiri dengan tag </td> .

Tapi, itu bukan meja, katamu! Itu tidak memiliki perbatasan! Sebenarnya, itu adalah meja. Ini adalah tabel tanpa batas atau BORDER=”0″ . Konsep ini sangat penting ketika Anda ingin menggunakan pernyataan TABEL untuk memformat halaman web Anda. Anda tidak selalu menginginkan batas yang tebal. Ok, jadi mari kita buat tabel dengan BORDER kali ini.

Satu-satunya perbedaan antara tabel ini dan tabel sebelumnya adalah pernyataan <table> yang terlihat seperti berikut ini.

<batas tabel="7″>

Cukup mudah, ya? Ukuran perbatasan diwakili dalam piksel. Ok, sekarang mari kita dapatkan lebih banyak CELLSPACING . Itu adalah jarak antara sel tabel kita. Anda juga dapat menganggap ini sebagai ketebalan dinding di antara sel-sel tabel.

Itu terlihat jauh lebih baik. Dapatkah Anda melihat perbedaannya? Sekali lagi satu-satunya perubahan adalah pada pernyataan <table> yang terlihat seperti berikut ini.

<table border="7″ cellspacing="7″>

CELLSPACING , seperti BORDER , juga diukur dalam piksel. Tapi, teksnya terlihat terlalu dekat dengan dinding meja, katamu! Oke, oke, kita juga bisa memperbaikinya. Ini disebut CELLPADDING . Ini adalah ruang antara isi sel dan tepi dinding sel.

Ah, apakah itu yang Anda inginkan? Tidak? Yah, saya harus melebih-lebihkan angkanya sedikit, tapi itu hanya untuk mencoba dan menjelaskan. Saya harap Anda dapat melihat perbedaannya. Tabel sebelumnya dibuat dengan pernyataan <table> yang ditunjukkan di bawah ini.

<table border="7″ cellspacing="7″ cellpadding="7″>

Membingkai Gambar:

Sekarang kami ingin masuk ke hal-hal yang lebih menyenangkan. Membingkai gambar adalah cara yang bagus untuk menyempurnakan gambar Anda. Itu membuat mereka tampak melompat keluar dari halaman. Ini adalah karya 5 detik saya.

Karya seni yang cukup keren, bahkan membuat gambar buruk saya terlihat bagus. Berikut kode yang membuatnya.

<batas tabel=”7″ alt="”>
<tr>
<td><img src="image.gif"></td>
</tr>
</tabel>

Tag <tr> dan tag </tr> dapat ditinggalkan jika diinginkan. Ini masih akan bekerja dengan baik. Puritan HTML mungkin akan berpendapat bahwa tag ini harus ada di sana. Jika Anda merasa seperti itu, seperti yang biasa saya lakukan, maka gunakanlah.

Atau Anda juga dapat membingkai foto Anda dengan teks seperti gambar di bawah ini.

Netto, hu! Kode ditunjukkan di bawah ini.

<tabel border="7″ cellpadding="10″>
<tr>
<td><img src=”image.gif” alt="”></td>
<td>Sungguh<br>Karya Agung!</td>
</tr>
</tabel>

Saya punya satu catatan lagi tentang membingkai gambar. Jika Anda mengalami masalah memusatkan gambar Anda coba yang berikut ini.

<td align=”center”><img src=”image.gif”></td>

Tautan Pembingkaian:

Anda juga dapat meletakkan tautan di dalam tabel. Bahkan Anda dapat menempatkan seluruh halaman Anda di dalam sekumpulan perintah tabel jika Anda mau dan dengan menggunakan BORDER="0″ tidak ada yang benar-benar tahu. Mengapa Anda ingin melakukan itu, Anda bertanya? Untuk memformat gambar dan teks bersama-sama di halaman Anda; Pikirkan tentang itu. Ok, kembali ke framing link.

Berikut kode yang melakukannya.

<tabel border="7″ cellpadding="10″>
<tr>
<td><a href=”http://www.google.com/”>Google.com</a></td>
<td><a href=”http://www.yahoo.com/”>Yahoo!</a></td>
</tr>
<tr>
<td><a href=”http://www.jjwdesign.com/”>Desain JJW</a></td>
<td><a href=”http://www.iproundup.com/”>Pengumpulan IP</a></td>
</tr>
</tabel>

Yah, saya harap Anda menikmati bagian kecil dari pernyataan <table> ini . Ada banyak lagi yang dapat Anda lakukan dengan pernyataan <table> daripada yang mungkin dilakukan dalam tutorial ini. Namun, saya harap ini membantu.

Tautan ke Tutorial ini!

Apakah Anda merasa tutorial ini bermanfaat? Jika demikian, tolong bantu saya untuk membagikannya dengan orang lain dengan menautkannya. Cukup tempatkan kode HTML di bawah ini ke halaman Web Anda sendiri untuk membuat link ke tutorial ini.