Cara Mengatur Lebar Tabel

Daftar Isi:

Cara Mengatur Lebar Tabel
Cara Mengatur Lebar Tabel

Video: Cara Mengatur Lebar Tabel

Video: Cara Mengatur Lebar Tabel
Video: 10 Mengubah Lebar Kolom Dan Baris Tabel 2024, Mungkin
Anonim

Instruksi HyperText Markup Language (HTML) yang membentuk tabel yang ditempatkan di halaman web menyediakan sejumlah besar parameter tambahan. Hal ini memungkinkan, tidak seperti elemen blok lainnya, untuk mengatur ukuran tidak hanya menggunakan bahasa CSS (Cascading Style Sheets atau "Cascading Style Sheets"), tetapi juga menggunakan HTML itu sendiri.

Cara mengatur lebar tabel
Cara mengatur lebar tabel

instruksi

Langkah 1

Gunakan atribut lebar dari tag tabel untuk menentukan lebar tabel dalam piksel. Tabel tag (instruksi HTML) terdiri dari tabel pembuka (

) dan penutup (

) bagian, di antaranya ada tag yang membentuk baris dan sel tabel. Parameter tambahan (atribut) dapat ditempatkan di tag pembuka, daftar yang untuk setiap tag spesifik ditentukan oleh standar internasional. Untuk tag tabel, standar ini mengizinkan penggunaan atribut lebar, yang menentukan lebar tabel dalam piksel. Kode HTML tabel sederhana dengan tag yang menentukan lebar 500 piksel dapat terlihat seperti ini:

sel pertama sel ke-2

Langkah 2

Tambahkan karakter a% ke nilai atribut lebar jika Anda perlu menentukan lebar tabel sebagai persentase, bukan dalam piksel:

sel pertama sel ke-2

Harap dicatat bahwa persentase ini tidak harus didasarkan pada lebar jendela browser. Struktur dokumen penting di sini - sama seperti boneka bersarang tidak boleh lebih lebar dari boneka di mana ia bersarang, jadi 100% lebar tabel tidak boleh lebih besar dari lebar elemen induk. Misalnya, jika tabel berada di dalam blok div, maka lebar blok ini akan diambil 100%.

Langkah 3

Gunakan instruksi bahasa deskripsi gaya jika Anda ingin mengatur lebar yang sama untuk tabel di halaman web di satu tempat di kode sumber. Untuk melakukan ini, tempat pertama di bagian kepala kode HTML (antara dan) tag pembuka dan penutup yang membatasi pernyataan bahasa CSS:

/ * Instruksi CSS akan ada di sini * /

Kemudian letakkan CSS berikut di antara tag tersebut: tabel {width: 100px;} Di sini, tabel menunjukkan bahwa deskripsi yang ditempatkan di dalam kurung kurawal harus diterapkan ke semua tag tabel yang muncul di kode halaman. Nah, parameter lebar mengatur lebar. Di sini juga, Anda dapat menggunakan lebar relatif sebagai persentase.

Langkah 4

Tentukan nama kelas dalam kode CSS dan dalam tag tabel HTML jika Anda perlu menentukan lebar tidak untuk semua tabel, tetapi hanya untuk satu atau beberapa tabel. Sebagai contoh, katakanlah kelas yang menandai sekelompok tabel sempit berukuran kecil. Kemudian deskripsi gayanya mungkin terlihat seperti ini: table.tiny {width: 100px;} Dan tag yang sesuai dari salah satu tabel dalam kode HTML adalah seperti ini:

sel pertama sel ke-2

Direkomendasikan: