Artikel Terbaru

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, so please be patient :D

Hot Artikel!!!

Enkapsulasi pada Java

6 Tahap Utama dalam Melakukan Kompilasi Program Hello World Java

6 Contoh Program Method Overloading pada Java