Rabu, 27 Januari 2016

Kegiatan 6

 Terdapat banyak cara untuk menampilkan data, mulai dari dengan menggunakan grafik, daftar, sampai dengan tabel. Untuk menampilkan data dengan grafik pada HTML, kita dapat menggunakan gambar (elemen img), sementara daftar jelas dibuat menggunakan elemen list. Bagaimana dengan tabel? HTML memiliki elemen khusus untuk membuat tabel, yaitu table.
Hasil Coding:
<!DOCTYPE html>
<head>
<title>Top index</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <table width="800" height="542" border="1"   align="center">
    <tr>
     <td height="23" align="center" bordercolor="#FFFFFF" bgcolor="#FFFF00"><strong><font size="+5">Banner 
        / Judul</font></strong></td>
    </tr>
        <tr>
      <td height="457" align="center" bgcolor="#CCCCCC"> 
        <p>Body atau contents(isi)</p>
        <p><font color="#006600">Body atau contents(isi)</font></p>
        <p><font color="#CC0000">Body atau contents(isi)</font></p>
        <p><font color="#FFFF00">Body atau contents(isi)</font></p>
        <p><font color="#990033">Body atau contents(isi)</font></p></td>
    </tr>
    <tr>
      <td height="23" align="center" bgcolor="#CCFF99"><font color="#FF0000"><strong><font size="+2">Daftar 
        isi atau navigasi </font></strong></font><font color="#9966CC" size="+2">&nbsp;</font></td>
    </tr>
  </table>
</form>
Contoh Hasil Dari Coding Tersebut
 
Inilah hasil dari coding tersebut, semoga bisa membantu :) 
Diposting oleh di Tidak ada komentar:

kegiatan 5

            Sebuah dokumen tidak jarang digunakan untuk menampilkan data kepada penggunanya. Terdapat banyak cara untuk menampilkan data, mulai dari dengan menggunakan grafik, daftar, sampai dengan tabel. Untuk menampilkan data dengan grafik pada HTML, kita dapat menggunakan gambar (elemen img), sementara daftar jelas dibuat menggunakan elemen list. Bagaimana dengan tabel? HTML memiliki elemen khusus untuk membuat tabel, yaitu table.
Contoh Coding tabel :
 Top Index
<!DOCTYPE html>
<head>
<title>Top index</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="542" border="1" align="center">
<tr>
<td height="23" align="center" bordercolor="#FFFFFF" bgcolor="#FFFF00"><strong><font size="+5">Banner
atau iklan</font></strong></td>
</tr>
<tr>
<td height="27" align="center" bgcolor="#FFCCCC"><font color="#FF0000">Daftar
isi atau navigasi </font></td>
</tr>
<tr>
<td height="457" align="center" bgcolor="#FF66CC">
<p>Body atau contents(isi)</p>
<p><font color="#006600">Body atau contents(isi)</font></p>
<p><font color="#CC0000">Body atau contents(isi)</font></p>
<p><font color="#FFFF00">Body atau contents(isi)</font></p>
<p><font color="#FF6633">Body atau contents(isi)</font></p></td>
</tr>
<tr>
<td height="23" align="center" bgcolor="#CCFF99"><font color="#9966CC">Info
tambahan atau lain-lain </font></td>
</tr>
</table>
</form>
</body>
</html>    


Hasilnya :

 
Inilah hasil dari coding tersebut, semoga bisa membantu :)



Diposting oleh di Tidak ada komentar:

Selasa, 26 Januari 2016

Table In Table

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Tabel dibuat dengan menggunakan tag <table>. Sebuah tabel dibagi menjadi baris-baris, dan tiap baris dibagi ke dalam cell-cell. Baris dibuat dengan tag <tr>, dan cell-cell yang akan membentuk kolom dibuat dengan tag <td>.
Dalam konteks HTML, table mempunyai peranan yang sangat penting. Selain digunakan untuk menampilkan tabel berisi data, table juga digunakan untuk menyusun teks dalam kolom, ataupun membuat laporan terstruktur lainnya.
<html>
<head>
    <title>Table In Table</title>
</head>

<body>
    <table cellpadding="5" align="center" bgcolor="red" width="800px" cellspacing="5">
        <tr><td><b>table > tr > td
            <table width="100%" cellspacing="5" cellpadding="5"><tr><td  valign="top" bgcolor="orange" height="50px"><b>table > tr > td</td></tr></table>
            <table width="100%"  cellspacing="5" cellpadding="5"><tr><td  valign="top" bgcolor="orange" height="80px"><b>table > tr > td</td></tr></table>
            <table width="100%" cellspacing="5" cellpadding="5"><tr><td  valign="top" bgcolor="orange" height="100px"><b>table > tr > td</td></tr></table>
            <table width="100%" cellspacing="5" cellpadding="5"><tr><td  valign="top" bgcolor="orange" height="250px"><b>table > tr > td
                <table width="100%" cellspacing="5" cellpadding="5">
                    <tr>
                    <td valign="top" bgcolor="#00BCD4" width="150px" height="250px">td</td>
                    <td valign="top" bgcolor="#00BCD4">td
                        <table cellpadding="7" cellspacing="5" bgcolor="#FF5722" width="100%">
                            <tr><td><b>table > tr > td</td></tr>
                            <tr><td bgcolor="white" valign="top" height="50px">td</td></tr>
                            <tr><td bgcolor="white" valign="top">td</td></tr>
                            <tr><td bgcolor="white" valign="top" height="50px">td</td></tr>
                            <tr><td bgcolor="white" valign="top">td</td></tr>
                            <tr><td bgcolor="white" valign="top" height="40px">td</td></tr>
                            <tr><td bgcolor="white" valign="top">td</td></tr>
                            <tr><td bgcolor="white" valign="top" height="120px">td</td></tr>
                        </table>
                    </td>
                    <td valign="top" bgcolor="#00BCD4" width="150px">td</td>
                    </tr>
                </table>
            </td></tr></table>
            <table width="100%" cellspacing="5" cellpadding="5"><tr><td  valign="top" bgcolor="orange" height="30px"><b>table > tr > td</td></tr></table>       
        </td></tr>
    </table>
</body>
</html>











Diposting oleh di Tidak ada komentar:

Kamis, 07 Januari 2016

Tugas Pemrograman Web - Tabel bersarang

kali ini saya akan sedikit cerita tentang cara membuat tabel bersarang di HTML. Tabel dalam website banyak digunakan untuk menyajikan informasi yang terdiri dari baris dan kolom agar tampak lebih rapi dan mudah dipahami. Dengan kode HTML sederhana Kita dapat membuat tabel statis , Informasi yang muncul dari data yang ditulis dalam kode HTML sederhana. Dalam web desain, tabel juga bisa membuat penampilan lebih cantik dan rapi .

Contoh membuat tabel bersarang :
<html>
<head>
</head>
<body bgcolor="#FF0000">
    <table border="1" cellpadding="5">
    <caption>Online Order</caption>
    <tr>
        <th>Description</th>
        <th>Qty</th>
        <th align="right">Price</th>
        <th>Email Account Note</th>
    </tr>
   
   
    <tr>
        <td>Email Account</td>
        <td align="right">10</td>
        <td align="right">$9.90</td>
        <td rowspan="5">
            <table border="1">
                <tr><td>Mailbox</td><td>10GB</td></tr>
                <tr><td>Webmail</td><td>Yes</td></tr>
                <tr><td>POP3</td><td>Yes</td></tr>
                <tr><td>IMAP</td><td>Yes</td></tr>
                <tr><td>Anti-spam</td><td>Yes</td></tr>
            </table>
        </td>
    </tr>
   
    <tr>
        <td>FYIcenter.com ad</td>
        <td align="right">1</td>
        <td align="right">$99.00</td>
    </tr>
   
    <tr>
        <td>1-years Acces</td>
        <td align="right">1</td>
        <td align="right">$199.00</td>
    </tr>
   
    <tr>
        <td colspan="2" align="right">Shipping</td>
        <td align="right">$3.99</td>
    </tr>
   
    <tr>
        <td colspan="2" align="right">Tax</td>
        <td align="right">$15.99</td>
    </tr>
    </table>
</body>
</html>

Hasil dari Coding :

Diposting oleh di Tidak ada komentar:
Langganan: Komentar (Atom)