Tutorial Tabel HTML Part 8: Cara Mengatur dan Mengubah Lebar Tabel HTML (atribut width)

05 Dec 13 | Andre | Tutorial HTML | 41 Comments

Secara default bawaan HTML, setiap tabel akan diatur lebarnya secara otomatis dari besar data yang ada didalam tabel tersebut, namun jika kita ingin ‘memaksakan’ web browser untuk menampilkan tabel dengan lebar tertentu, kita bisa menambahkan sebuah atribut width untuk mengatur lebar tabel.

Sama seperti penjelasan pada tutorial tentang rules, jika anda telah memahami CSS, disarankan menggunakan CSS untuk memanipulasi tampilan dari tabel dibandingkan menggunakan atribut width secara langsung didalam tag HTML.

Berikut adalah contoh tabel yang memiliki perbedaan panjang untuk baris:

<!DOCTYPE html>

<html>

   <head>

      <title>Contoh pemakaian attribut width dalam Tabel HTML</title>

   </head>

<body>

<h2>Belajar atribut width dalam Tabel HTML</h2>

<table border="1">

<caption>------------Tabel Tanpa Atribut Width--------------</caption>

    <tr>

        <th>Judul 1</th>

        <th>Judul 2</th>

        <th>Judul 3</th>

    </tr>

    <tr>

        <td>Baris 1, Kolom 1</td>

        <td>Baris 1, Kolom 2</td>

        <td>Baris 1, Kolom 3</td>

    </tr>

    <tr>

        <td>Data yang sangat panjang, 

            sehingga merusak tampilan dari tabel</td>

        <td>Baris 2, Kolom 2</td>

        <td>Baris 2, Kolom 3</td>

    </tr>

    <tr>

        <td>Baris 3, Kolom 1</td>

        <td>Baris 3, Kolom 2</td>

        <td>Baris 3, Kolom 3</td>

    </tr>

</table>

</body>

</html>

Contoh Tabel HTML Tabel Tanpa Atribut Width

Dapat dilihat bahwa web browser menampilkan tabel sesuai dengan panjang data yang terdapat pada baris terpanjang, dan jika anda mencoba mengecilkan jendela web browser, tampilan tabel akan bergeser menyesuaikan dengan lebar web browser. Inilah tampilan default dari tabel HTML.

media pembelajaran tik

Jumat, 21 April 2017

tutorial tabel HTML part8; cara mengatur dan mengubah lebar tabel HTML (atribut width)

Tutorial Tabel HTML Part 8: Cara Mengatur dan Mengubah Lebar Tabel HTML (atribut width)

Tidak ada komentar:

Posting Komentar