HTML Markup Language - Tag Tabel

Klik di sini untuk kembali ke kolom tutorial Wulin.com HTML.

Atas: Bahasa Markup - Judul

Sumber asli

Apakah Anda tahu? Saya tidak tahu kapan itu dimulai, menggunakan tabel berubah menjadi tindakan berdosa? Memang, mitos terbesar menulis halaman web berdasarkan standar web adalah berhenti menggunakan tabel lagi, tidak pernah! Kedengarannya seperti wabah, harus dihindari, dan harus disegel dan dilemparkan ke dalam kabinet yang berdebu, dan dianggap sebagai barang antik yang diturunkan dari masa -masa awal era pengembangan internet.

Darimana jijik seperti itu berasal? Mungkin itu sangat sederhana pada awalnya, setidaknya dengan alasan yang bagus. Banyak orang akan percaya diri dalam mempromosikan manfaat meninggalkan tata letak tradisional sarang tabel dan gambar GIF kosong, dan sebaliknya menggunakan tata letak CSS terstruktur yang fleksibel. Kita mungkin mulai menghapus semua tabel dengan cara yang terpisah, dan bahkan dengan keras kepala bersikeras untuk mengeluarkan semua tabel - tidak peduli kesempatan itu.

Kemudian dalam buku ini, kita akan melihat metode tata letak CSS dan semua manfaat melakukannya. Tapi sekarang mari kita lihat cara menggunakan tabel dalam situasi yang tepat - yaitu, ketika menandai daftar data. Kami akan melihat beberapa cara sederhana untuk membuat daftar data kami lebih mudah digunakan dan lebih indah.

Saat menandai data daftar, sama sekali tidak ada alasan untuk tidak menggunakan tag tabel. Tapi tunggu, apa itu data daftar? Berikut adalah beberapa contoh: Jadwal Waktu Bagan Kalender

Untuk contoh -contoh ini dan banyak kasus lainnya, efek CSS yang sangat kompleks dan ketat harus digunakan untuk membuat data terlihat seperti tabel. Mungkin Anda dapat membayangkan bahwa menggunakan CSS yang pintar mengapung untuk menemukan semua proyek akan menghasilkan hasil yang tidak kompatibel dan kontradiktif, belum lagi bahwa setelah menghapus CSS, membaca secara akurat setiap data mungkin akan menjadi tugas yang mustahil. Bahkan, kita tidak harus takut dengan tabel - kita harus menggunakannya dengan tujuan desain aslinya.

Salah satu alasan mengapa tabel dikritik adalah bahwa jika Anda tidak digunakan dengan hati -hati, akan ada cacat kegunaan. Misalnya: Program pembacaan layar sulit dibaca konten dengan benar, sementara perangkat layar kecil sering terganggu oleh tabel yang digunakan untuk tata letak, tetapi kami memiliki beberapa cara sederhana untuk meningkatkan kegunaan tabel data daftar. Pada saat yang sama, kami membangun struktur yang fleksibel untuk memfasilitasi pengaturan gaya dengan CSS di masa depan.

Mari kita lihat contoh sederhana pada Gambar 3-1, yang merupakan rekor liga dari American Baseball League:

Gambar 3-1: Contoh Representasi Data Khas

Mungkin ini adalah data statistik yang sangat menyedihkan untuk penggemar Red Sox, tetapi Gambar 3-1 adalah contoh sempurna dari data daftar. Ini memiliki tiga header meja (tahun, lawan, rekor musim (WL)), diikuti oleh data empat tahun. Di atas meja adalah judul tabel, yang menjelaskan konten tabel.

Cara menandai tabel data ini sangat intuitif, dan kami dapat melakukan ini dengan kode seperti ini:

<P Align = Center> Kejuaraan Seri Dunia Boston Red Sox </p>

<able>

<tr>

<td align = center> <b> tahun </b> </td>

<td align = center> <b> lawan </b> </td>

<TD Align = Center> <b> Rekor Musim (WL) </b> </td>

</tr>

<tr>

<td> 1918 </td>

<td> Chicago Cubs </td>

<td> 75-51 </td>

</tr>

<tr>

<td> 1916 </td>

<td> Brooklyn Robins </td>

<td> 91-63 </td>

</tr>

<tr>

<td> 1915 </td>

<td> Philadelphia Phillies </td>

<td> 101-50 </td>

</tr>

<tr>

<td> 1912 </td>

<td> New York Giants </td>

<td> 105-47 </td>

</tr>

</boable>

Hasil yang ditunjukkan dengan cara ini harus sangat mirip dengan Gambar 3-1, tetapi kami dapat menambahkan beberapa perbaikan pada dasar ini.

Pertama, kita dapat menggunakan tag <septition> yang lebih semantik untuk menyimpan Kejuaraan Seri Dunia Boston Red Sox. Tag <compttion> perlu diikuti segera setelah tag awal <able>, yang biasanya digunakan untuk menyimpan judul tabel atau deskripsi informasi tabel.

Tampaknya itu memudahkan pengguna untuk melihat topik tabel, dan itu juga dapat membantu orang yang mengetahui konten web dengan cara lain.

Mari kita hapus paragraf awal dan tambahkan <laption> yang benar:

<able>

<compttion> Kejuaraan Seri Dunia Boston Red Sox </ Caption>

<tr>

<td align = center> <b> tahun </b> </td>

<td align = center> <b> lawan </b> </td>

<TD Align = Center> <b> Rekor Musim (WL) </b> </td>

</tr>

<tr>

<td> 1918 </td>

<td> Chicago Cubs </td>

<td> 75-51 </td>

</tr>

<tr>

<td> 1916 </td>

<td> Brooklyn Robins </td>

<td> 91-63 </td>

</tr>

<tr>

<td> 1915 </td>

<td> Philadelphia Phillies </td>

<td> 101-50 </td>

</tr>

<tr>

<td> 1912 </td>

<td> New York Giants </td>

<td> 105-47 </td>

</tr>

</boable>

Yang penting, judul harus dengan cepat menyampaikan subjek informasi berikut. Menurut pengaturan default, sebagian besar browser visual memusatkan teks di tag <comption> di bagian atas tabel. Tentu saja, kita dapat menggunakan CSS untuk mengubah gaya pengaturan default nanti - masalah ini akan dibahas dalam perpanjangan tips bab ini. Faktanya, judulnya sekarang terletak di tag unik, yang membuat modifikasi kami bekerja lebih mudah dan sederhana.

Page sebelumnya 2 3 4 5 6 7 8 Halaman Berikutnya Baca teks lengkapnya