Membuat Tabel Konten Website dengan HTML | Hello World #5

March 03, 2019 , , 2 Comments



Hello World ! Kali ini gue mau kasih tutorial membuat tabel dengan HTML. Dengan tabel kita dapat menyajikan informasi yang menarik dan mudah dipahami.

Dalam tutorial ini gue masih menggunakan HTML. Kalian bisa melihat postingan gue sebelumnya tentang html disini. Software yang gue gunain juga masih sama yaitu microsoft visual code.

Oke mari kita mulai
1. Buka microsoft visual code
2. Masukkan script code

 <table border="5">
       <tr>
       <td colspan="3">DEPARTEMEN TEKNIK ELEKTRO </td>
       <td colspan="2">DEPARTEMEN TEKNIK INFORMATIKA DAN KOMPUTRER</td>
       </tr>
       <tr>
       <td rowspan="3">TEKNIK ELEKTRO INDUSTRI</td>
       <td rowspan="3">TEKNIK ELEKTRONIKA</td>
       <td rowspan="3">TEKNIK TELEKOMUNIKASI</td>
       </tr>
       <tr>
       <td rowspan="3">TEKNIK INFORMATIKA</td>
       <td rowspan="3">TEKNIK KOMPUTER</td>
       </tr>
 </table>

Penjelasannya
- <table> dan </table> digunakan untuk memulai membuat table baru
- <tr> dan </tr> adalah table row digunakan untuk membuat baris baru pada tabel
- <td> dan </td> adalah table data digunakan untuk memasukkan data pada tabel
- colspan digunakan untuk menggabungkan kolom pada tabel
- rowspan digunakan untuk menggabungkan baris pada tabel
- border digunakan untuk memberikan garis tepi pada tabel

Contoh penggunaan


<!DOCTYPE html>
<html style="background-color:whitesmoke; width: 600px; height: 500px; padding: 50px; padding-top: 0px">

<head>
    <title>Web Desain 3</title>
</head>
<center>
<body>
    <p>                         
        <table border="5">
            <tr>
                <td colspan="3">DEPARTEMEN TEKNIK ELEKTRO </td>
                <td colspan="2">DEPARTEMEN TEKNIK INFORMATIKA DAN KOMPUTRER</td>
            </tr>
            <tr>
                <td rowspan="3">TEKNIK ELEKTRO INDUSTRI</td>
                <td rowspan="3">TEKNIK ELEKTRONIKA</td>
                <td rowspan="3">TEKNIK TELEKOMUNIKASI</td>
            </tr>
            <tr>
                <td rowspan="3">TEKNIK INFORMATIKA</td>
                <td rowspan="3">TEKNIK KOMPUTER</td>
            </tr>
        </table>
    </p>
</body>
</center>
</html>


 Contoh lain

<!DOCTYPE html>
<html style="background-color:whitesmoke; width: 500px; height: 500px; padding: 50px; padding-top: 0px">

<head>
    <title>Web Desain 2</title>
</head>

<body style="background-color: darkgrey; border-top-right-radius: 10%; border-top-left-radius: 10%">
    <h1 style="padding: 20px;"><center>Personal data</center> </h1>  
        <center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlVLgeKcycUVuofisHWLoUUWYnlfQfEryI-_RSWvYlGJpZPhOzpMBf9_dWH4r6jQg1KyHW4F1hnAYmrFYPWt7B-ghBM4UUmMcFVSzhTVy3HjoJzQC0pBF-lIkYag5MtiTBZgWbhAk9AsGj/s1600/Logo_PENS-1.png" width="100" height="100"/></center>
            <p style="padding-bottom:  50px; padding-left: 35px; padding-right: 20px;">
                <center>ELECTRONIC ENGINEERING POLYTECHNIC INSTITUTE OF SURABAYA</center>
                <table style="margin-top:20px; padding: 5px; border-color: lavender" border="6">
                    <tr style="padding: 5px;">
                        <td>NAME </td>
                        <td>IRFAN IZUDIN</td>
                        <td rowspan="11"><img src="foto.jpg" width="200" height="200" style="border-radius: 45%; margin: 20px;"/></td>
                    </tr>
                    <tr>
                        <td>PROGRAM</td>
                        <td>D3</td>
                    </tr>
                    <tr>
                        <td>STUDY PROGRAM</td>
                        <td>ELECTRICAL ENGINEERING</td>
                    </tr>
                    <tr>
                        <td>BIRTH</td>
                        <td>18/08/1999</td>
                    </tr>   
                    <tr>
                        <td>PLACE OF BIRTH</td>
                        <td>TULUNGAGUNG</td>
                    </tr>
                    <tr>
                        <td>MEMBER SINCE</td>
                        <td>27-06-2018</td>
                    </tr>
                    <tr>
                        <td>SEX</td>
                        <td>MALE</td>
                    </tr>
                    <tr>
                        <td>RELIGION</td>
                        <td>ISLAM</td>
                    </tr>
                    <tr>
                        <td>BLOOD TYPE</td>
                        <td>O</td>
                    </tr>
                    <tr>
                        <td>ADDRESS</td>
                        <td>TULUNGAGUNG</td>
                    </tr>
                    <tr>
                        <td>TELP</td>
                        <td>08********</td>
                    </tr>
                    
                </table>       
            </p>

</body>

</html>

 
Udah sekian tutorialnya kalo belum jelas silahkan komentar di bawah. Selamat berkreasi tunggu update selanjutnya. Byee

2 comments:

  1. merenlauMarch 19, 2020 at 10:58 PM

    This comment has been removed by the author.

    ReplyDelete
  2. merenlauMarch 19, 2020 at 11:27 PM

    thanks kak untuk artikelnya.. hanya saja bagi saya yg masih pemula ini masih kurang memahami bagian "contoh lain" pada artikel kk ini dan mohon penjelasnya juga kak bagaimana mengatur tinggi & lebar tabel pada html? sukses slalu dan terus berkarya kak.. saya meren laurensia mahasiswi dari STMIK Atma Luhur Pangkalpinang.. ini website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete

Subscribe to: Post Comments (Atom)