this → Artikel Baru – ( Atrikel Lama ↓ )

Cara Mengatur Lebar Tabel pada HTML

Ukuran lebar tabel yang dibuat pada halaman website secara default masih bersifat statis atau kaku. Contoh, jika seorang perancang website membuat sebuah halaman website menggunakan kode html untuk ukuran layar komputer, maka ketika website tersebut dibuka menggunakan layar handphone maka ukurannya akan terlihat lebih kecil, namun untuk beberapa kondisi jika dihalaman website yang telah dibuat sebelumnya terdapat tabel, maka ukuran tabel tersebut dapat menjadi lebih lebar dari ukuran layar handphone sehingga tampilan tabel yang awalnya terlihat utuh jika ditampilkan pada layar komputer akan menjadi terpotong jika ditampilkan pada layar handphone. Untuk mengatasi permasalahan tersebut, maka ukuran dari lebar tabel dapat dibuat dinamis, dimana ukuran lebarnya dapat menyesuaikan secara otomatis terhadap lebar layar dimana web tabel ditampilkan. Pembuatan tabel dengan lebar dinamis dapat dilakukan dengan menggunakan atribut WIDTH pada tag table. Pada materi ini peserta didik akan belajar bagaimana cara membuat tabel dengan ukuran lebar tabel selalu berukuran 75% dari ukuran browser. Sebelum memulai kegiatan, peserta didik mempersiapkan alat-alat praktiknya terlebih dahulu mulai dari PC atau perangkat mobile yang didalamnya terdapat aplikasi Notepad atau teks editor yang dapat digunakan untuk membuat file html. Setelah proses persiapan selesai, peserta didik dapat memulai kegiatan praktik dengan mengikuti instruksi sebagai berikut:

satu, Jalankan Notepad.
dua, Ketik baris kode program berikut ini.

<html>

 

<head>

<title>

Mengatur lebar tabel

</title>

</head>

 

<body>

<table border="1" align="center" cellspacing=3 cellpadding=5 width="75%">

 

<!-- bagian heading -->

<tr>

<th bgcolor="gray"> No </th>

<th bgcolor="gray"> Nama </th>

<th bgcolor="gray"> Nilai </th>

</tr>

 

<!-- tabel baris ke-1 -->

<tr>

<td align="right"> 1 </td>

<td> Monkey D. Luffy </td>

<td align="center"> 80 </td>

</tr>

 

<!-- tabel baris ke-2 -->

<tr>

<td align="right"> 2 </td>

<td> Via Vallen </td>

<td align="center"> 85 </td>

</tr>

 

<!-- tabel baris ke-3 -->

<tr>

<td align="right"> 3 </td>

<td> Joko widodo </td>

<td align="center"> 25 </td>

</tr>

 

</table>

</body>

 

</html>


tiga, Simpan dengan nama "latihan34.html".
empat, Jalankan file latihan34.html pada browser.

Komentar

  1. Balasan
    1. Modul HTML Bimbingan Teknologi Informasi dan Komunikasi Kelas X SMAN 8 Semarang Edisi 1. 2020. Jawa Tengah.

      Hapus
  2. Apa fungsi utama atribut lebar yang terdapat pada tabel html?

    BalasHapus
    Balasan
    1. Atribut TABLE WIDTH atau lebar digunakan untuk menentukan ukuran lebar tabel terhadap layar dengan satuan pixel. Jika atribut width tidak diatur pada tabel, maka tabel akan membuat ukuran lebar secara default pada laman html.

      Hapus
  3. Bagaimana cara mengatur ukuran lebar tabel dengan menggunakan CSS?

    BalasHapus
    Balasan
    1. Salah satu alternatif untuk mengatur ukuran lebar tabel adalah dengan menggunakan atribut SYTLE. Atribut STYLE menentukan gaya baris pada sebuah elemen yang dipengaruhinya. Atribut tersebut digunakan dengan tag HTML TABLE dengan properti WIDTH yang ditelakkan dalam atribut CSS.

      Hapus

Posting Komentar

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

Catatan: setiap iklan yang ditayangkan pada blog ini bersumber dari google adsense. Dengan jenis iklan yang dipilih adalah, sebagai berikut.

POIN 1, Iklan yang ditampilkan hanya boleh berbahasa indonesia atau berbahasa inggris. Tidak menerima jenis iklan dalam bahasa yang lain selain yang telah disebutkan karena blog ini dibuat untuk para pengunjung dari negara atau orang yang berbahasa Indonesia.

POIN 2, Setiap gambar yang ditampilkan pada iklan sifatnya tidak mengganggu para pengunjung yang melihat blog, atau tidak boleh menampilkan gambar yang bersifat menjijikkan atau merangsang rasa mual.

POIN 3, Jenis iklan yang dipasang bukan merupakan iklan spam, atau berisi dan mengarahkan pengunjung ke alamat yang berbahaya atau bersifat penipuan.

POIN 4, Segala bentuk iklan tunduk dan patuh pada ketentuan dari pihak Adsense google dan pemilik blog.

POIN 5, Segala jenis iklan yang tidak bertentangan dengan poin 1-4 yang dijelaskan sebelumnya, maka iklan tersebut dapat ditampilkan pada blog.



~ Ikatlah Ilmu dengan Memostingkannya ~

Hot Artikel

Enkapsulasi pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C

10 Aturan Utama Penggunaan Overriding pada Java

5 Cara Konversi Tipe Data pada Java

6 Aturan Penting Switch Statement pada Java

Perbedaan Antara int main() dan int main(void) pada Bahasa C

Penjelasan Singkat tentang Konsep Asosiasi, Komposisi, dan Agregasi pada Java