Tabel & Web Layout pada HTML

Assalamu'alaikum, hallo semuanya! Kembali lagi dengan saya Fadli Mahesa, seorang siswa yang bersekolah di SMKN 4 Bandung dan duduk di bangku kelas XI RPL 3. Kali ini saya akan membagikan lagi sedikit ilmu di dunia percodingan, yaitu tentang Tabel & Web Layout pada HTML. Beberapa pemahaman yang akan saya bagikan adalah tag - tag membuat Tabel dan Web Layout pada bahasa pemrograman HMTL antara lain :

A. Tabel dalam HTML

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table pada HTML, digunakan tag <table> dan ditutup </table>. Adapun elemen berisi properti <tr> untuk menentukan baris(table row) yang didalamnya terdapat properti <td> untuk menampilkan data pada setiap sel table(table data).

berikut atribut elemen pada tabel yang sering digunanakan dalam HTML.

Elemen	Description
width	Panjang(lebar table, pixel atau persen)
height	Panjang(tinggi table, pixel atau persen)
border	Pixel(tebal garis tepi)
cellspacing	Pixel(spasi antar sel)
cellpadding	Pixel(spasi di dalam sel)
align	[left\|center\|right](perataan table)
bgcolor	Warna(warna latar belakang table)

berikut atribut elemen pada table row <tr> yang sering digunanakan dalam HTML.

Elemen	Description
align	[left\|center\|right](perataan sebaris sel secara horizontal)
valign	[left\|center\|right](perataan sebaris sel secara horizontal)
bgcolor	Warna(warna latar belakang baris)

Syntax Pembuatan Tabel :


<html>
<head>
<title>Latihan Tabel, by Fadli M</title>
</head>
<body>
<h1 align="center">berikut contoh tabel dengan rowspan dan colspan</h1>
    <table width="40%" border="2" cellspacing="0"
    cellpadding="0" bgcolor="azure">
    <tr>
        <td bgcolor="darkseagreen">baris 1 kolom 1</td>
        <td bgcolor="darkslategray">baris 1 kolom 2</td>
    </tr>
    <tr>
        <td colspan="2">baris 2 kolom 1(hanya ada 1 kolom)</td>
    </tr>
    <tr>
    <td rowspan="2">baris 3 kolom 1</td>
    <td>baris 3 kolom 2</td>
    </tr>
    </table>
</body>
</html>

Hasil

Untuk membuat table seperti tadi, maka table atribut yang digunakan adalah rowspan dan colspan. Adapun beberapa latihan pembuatan table yang dapat dicoba untuk lebih memahami cara pemakaian rowspan dan colspan.

Syntax Latihan Tabel 1 :


<html>
<head><title>Latihan Align, by Fadli M</title>
</head>
<body>
    <table border="9" bgcolor="moccasin">
    <caption> DAFTAR WIRANIAGA</caption>
    <tr>
        <th colspan ="2" rowspan="2">WIRANIAGA</th>
        <th colspan="3" bgcolor="lightsalmon">KOTA</th>
    </tr>
    <tr>
        <th>Pati</th> <th>Kudus</th> <th>Solo</th>
    </tr>
    <tr>
        <th rowspan ="2" bgcolor="pink">Jenis Kelamin</th>
        <th>Pria</th>
            <td align= "right">30 Orang</td>
            <td align= "right">20 Orang</td>
            <td align= "right">30 Orang</td>
    </tr>
    <tr>
        <th>Wanita</th>
            <td align= "right">30 Orang</td>
            <td align= "right">8 Orang</td>
            <td align= "right">18 Orang</td>
    </tr>
    </table>
</body>
</html>

Hasil

Syntax Latihan Tabel 2 :


<html>
<head><title>Latihan Tabel, by Fadli</title>
</head>
<body>
<table border="2">
    <tr>
        <td rowspan="2" bgcolor="lightsalmon" align="center">No</td>
        <td rowspan="2" bgcolor="skyblue" align="center">Nama</td>
        <td colspan="5" bgcolor="lightgreen" align="center">Pertemuan</td>
    </tr>
    <tr>
        <td bgcolor="darkturquoise" align="center">1</td>
        <td bgcolor="darkturquoise" align="center">2</td>
        <td bgcolor="darkturquoise" align="center">3</td>
        <td bgcolor="darkturquoise" align="center">4</td>
        <td bgcolor="darkturquoise" align="center">5</td>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="left">Neymar</td>
        <td align="center">✓</td>
        <td align="center">✓</td>
        <td align="center">✓</td>
        <td align="center">✓</td>
        <td align="center">s</td>
    </tr>
    <tr>
        <td align="center">2</td>
        <td align="left">Cristiano</td>
        <td align="center">a</td>
        <td align="center">✓</td>
        <td align="center">i</td>
        <td align="center">s</td>
        <td align="center">✓</td>
    </tr>
    <tr>
        <td align="center">2</td>
        <td align="left">Cristiano</td>
        <td align="center">a</td>
        <td align="center">✓</td>
        <td align="center">✓</td>
        <td align="center">✓</td>
        <td align="center">✓</td>
    </tr>
</table>
</body>
</html>

Hasil

Syntax Latihan Tabel 3 :


<html>
<head><title>Latihan Tabel, by Fadli</title>
</head>
<body>
    <table border="1" width="60%" height="20%" cellpadding="5">
    <tr>
        <td>Apel</td>
        <td valign="bottom" rowspan="2">Jeruk</td>
        <td>Mangga</td>
    </tr>
    <tr>
        <td>Pisang</td>
        <td>Nanas</td>
    </tr>
    <tr>
        <td>Leci</td>
        <td></td>
        <td></td>
    </tr>
    </table>
</body>
</html>

Hasil

B. Menyajikan Web Layout dalam HTML

Tabel juga dapat digunakan untuk membuat web layout dengan cara menyesuaikan ukuran tabel juga ukuran elemen lainnya. berikut adalah contoh pembuatan web layout menggunakan tabel mulai dari Top Index, Left Index, dan Split Index

Syntax Web Layout Top Index :


<html>
<head><title>Top Index, by Fadli M</title>
</head>
<body>
<table width="800" height="542" border="0" align="center">
    <tr>
        <td height="23" align="center" bgcolor="lightseagreen">
        <strong><font size="+5" color="ivory">
        Banner atau Iklan
        </font>
        </strong>
        </td>
    </tr>
    <tr>
        <td height="27" align="center" bgcolor="lightskyblue">
        <font color="ivory">Daftar isi atau Navigasi</font>
        </td>
    </tr>
    <tr>
        <td height="457" align="center" bgcolor="mediumseagreen">
        <p><font color="midnightblue">Body atau Contents(isi)</font></p>
        <p><font color="navy">Body atau Contents(isi)</font></p>
        <p><font color="royalblue">Body atau Contents(isi)</font></p>
        <p><font color="slateblue">Body atau Contents(isi)</font></p>
        </td>
    </tr>
    <tr>
        <td height="23" align="center" bgcolor="lightseagreen">
        <font color="ivory">Info tambahan atau lain - lain</font>
        </td>
    </tr> 
</table>
</body>
</html>

Hasil

Syntax Web Layout Left Index :


<html>
<head><title>Left Index, By Fadli M</title>
</head>
<body background="Media/pixels5.gif">
<font face="Montserrat Alternates SemiBold">
    <table width="800" height="647" border="0" align="center" cellpadding="1">
        <tr>
            <th width="160" rowspan="3" valign="top" background="Media/pixels6.gif">
            <p><a href ="topindex.html">Home</a></p>
            <font color="white">
            <p>Profile</p>
            <p>About Us</p>
            <p>Blog</p>
            <p>Contact Us</p></font>
            </th>
            <th width="827" height="223" align="center" background="Media/tenor.gif">
            <strong>
            <font face="lemon tuesday" color="gray" size="+4">
            Room Aesthetic Shop
            </font>
            </strong>
            </th>
        </tr>
        <tr>
            <td height="176" align="center" bgcolor="palevioletred">
            <font size="+2" color="white">
            <p> Selamat datang di Online Shop kami, kualitas dan harga dapat
            dipercaya, mari! langsung pesan saja dan menjadi langganan kami.
            </p>
            </font>
            </td>
        </tr>
        <tr>
            <td height="30" align="center" bgcolor="lavenderblush">
            <font size="+2">room-aesthetic.com</font>
            </td>
        </tr>
    </table>
</font>
</body>
</html>

Hasil

Syntax Web Layout Split :


<html>
<head>
<title>Split Index, by Fadli M</title>
</head>
<body background="Media/pixels1.gif">
    <font face="open sans semibold">
    <table width="800" height="612" border="0" align="center">
        <tr>
            <td width="15%" rowspan="2" align="center" background="Media/pixels7.gif">
            <strong>Daftar Isi</strong>
            </td>
            <td width="67%" height="90" align="center" bgcolor="aliceblue">
            <font size="+4"><strong>IceCreamTeria</strong></font>
            <td bgcolor="aliceblue">
            <img  width="50" height="75" src="Media/icecream.png">
            </td>
            </td>
            <td width="18%" rowspan="2" align="center" background="Media/pixels7.gif">
            <strong>Daftar Isi</strong>
            </td>
        </tr>
        <tr>
            <td height="406" align="center" bgcolor="cornflowerblue" colspan="2">
            <p><font>Body atau Contents(isi)</font></p>
            <p><font>Body atau Contents(isi)</font></p>
            <p><font>Body atau Contents(isi)</font></p>
            <p><font>Body atau Contents(isi)</font></p>
            </td>
        </tr>
        <tr bgcolor="aliceblue">
            <td height="23" colspan="4" align="center">Lain - lain</td>
        </tr>
    </table>
    </font>
</body>
</html>

Hasil

Sabtu, 25 Juli 2020

Tabel & Web Layout pada HTML

Sastra Coding

0 komentar:

Mengenai Saya

Popular Posts

Our Content

Recent Posts

Random Posts