1 / 30

Pemrograman web dasar

Pemrograman web dasar. TABEL. Tabel.

camden
Download Presentation

Pemrograman web dasar

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Pemrograman web dasar TABEL

  2. Tabel • Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom – kolom yang menunjukkan kelompok data dalam satu kesatuan. Berikut merupakan elemen yang merupakan penyusun tabel dalam HTML statis • <TABLE>…</TABLE> • Mendefenisikan sebuah tabel dalam HTML jika atribut border dituliskan, maka browser akan menampilkan tabel dengan border.

  3. Tabel • Tabel terdiri dari beberapa bagian / elemen yaitu : • Tabel Row atau baris tabel, yaitu baris-baris pada suatu tabel yang dinyatakan dengan pasangan tag <TR> • Tabel Data atau data tabel, yaitu tempat dimana anda memasukan informasi dalam suatu tabel.Beberapa tabel data yang terdapat dalam suatu baris membentuk tabel row.Tabel data dinyatakan dengan pasangan tag <TD> • Tabel Header adalah judul tabel yang biasanya terletak dibagian paling atas atau paling kiri dari suatu tabel Tabel header dinyatakan dengan pasangan tag <TH>…</TH>

  4. TabeL • Caption adalah judul tabel yang biasanya terletak dibagian luar suatu tabel, biasanya dibagian atas atau bagian bawah tabel.Pasangan tag yang digunakan untuk membentuk suatu caption adalah <CAPTION>…</CAPTION>.

  5. TABEL • Selain elemen – elemen tersebut tabel juga mempunyai beberapa atribut : • Border, untuk membuat batas tepi dari suatu tabel • Bordercolor, untuk memberi warna pada batas • Width, untuk mengatur lebar tabel • Align, untuk mengatur bentuk perataan horizontal data di dalam tabel, seperti dikiri, ditengah atau dibagian kanan.(left,right,center) • Valign, untuk mengatur perataan vertikal dari suatu data, seperti di atas, ditengah atau dibawah.(top,middle,bottom)

  6. TABEL • Cellspacing dan Cellpadding, untuk mengatur spasi antarsel dan spasi didalam sel.Sel adalah tempat atau kotak dimana data atau judul kolom atau judul baris berada. • Rowspan dan Colspan, yaitu gabungan sel-sel dalam suatu kolom atau baris • Color, yaitu untuk mengatur warna suatu sel dalam tabel

  7. Tabel • Untuk pembuatan tabel didalam HTML kita perlu menggunakan tag berpasangan yaitu : <TABLE> <tr> <TD>Tabel sederhana </TD> </tr> </TABLE> • Terlalu sederhana untuk dianggap sebagai tabel maka kita bisa menambahkan atribut border <TABLE BORDER= “ ...“> <tr> <TD>Tabel sederhana dengan suatu border</TD> </tr> </TABLE>

  8. Tabel • Didalam tag tabel ini kita dapat menentukan lebar tabel, jumlah baris dan kolom, border tabel, perataan dalam tabel, warna suatu sel dan lain sebagainya. • Contoh tabel yang paling sederhana adalah tabel yang hanya terdiri dari satu baris dan satu kolom saja seperti berikut : <table><tr> <td>Tabel sederhana</td></tr> </table>

  9. Tabel • Untuk membuat border tabel, gunakan atribut BORDER seperti berikut: <table border=““> <tr><td>Tabel sederhana dengan suatu border</td></tr> </table>

  10. Membuat tabel sederhana • Dengan atribut border, tabel anda mulai terlihat dengan adanya batas atau border pada tabel tersebut. • Lebar border ini dapat diubah-ubah dengan memberikan suatu nilai pada atribut tersebut, seperti : <table border=“5”> <tr><td>Tabel sederhana dengan lebar border = 5</td></tr> </table>

  11. Tabel dua dimensi • Pada contoh tabel diatas yang hanya terdiri dari satu baris, sel data dapat langsung didefenisikan dengan menggunakan tag <TD>…</TD>, tanpa perlu menggunakan tag<TR>…</TR>. • Jadi elemen TD (table data) berfungsi sebagai pembentuk kolom pada tabel. <table border=“5”> <td>kolom satu</td> <td>kolom dua</td> <td>kolom tiga</td> </table>

  12. Tabel dua dimensi • Untuk membuat tabel dengan 2 baris, harus menggunakan elemen TR (Table row) <TABLE BORDER=“5”> <TR> <TD>Baris 1, kolom1</TD> <TD>Baris1, kolom2</TD> <TD>Baris1, kolom3</TD> </TR>

  13. Tabel dua dimensi <TR> <TD>Baris 2, kolom 1</TD> <TD>Baris 2, kolom 2</TD> <TD>Baris 2, kolom 3</TD> </TR> </TABLE>

  14. Menambahkan judul tabel • Judul tabel, atau biasanya disebut caption, terletak dibagian luar suatu tabel. • Caption bisa berada dibawah atau di atas tabel, tetapi tidak bisa dibagian kiri dan kanan luar tabel. • Judul tabel dibuat dengan menggunakan elemen CAPTION, yang biasanya diletakan setelah tag awal <TABLE> <table border=“5”> <caption> <b>Judul Tabel</b> </caption>

  15. Tabel • Untukmembuatselkosongandacukupmendefenisikanseltersebutdenganelemen TH atau TD tanpadisertaidengan data apapundidalamnya. <table border="1"> <tr> <th>Nama</th> <th>Nilai 1</th> <th>Nilai 2</th> </tr>

  16. Tabel <tr> <td>Zona</td> <td>70</td> <td>90</td></tr> <tr> <td>Zono</td> <td>80</td> <td>92</td></tr> <tr> <td>Zoni</td> <td>85</td></tr> <tr> <td>Zunu</td> <td></td> <td>95</td></tr>

  17. Perataan dalam tabel • Dalamtabelada 2 macamperataanyaituperataanhorisontaldanperataanvertikal. • Horisontalbiasanyakekiri, kanan, dantengah. • Vertikalbiasanyakeatas, bawahdantengah. • Perataanhorisontaldinyatakandenganatribut ALIGN dandapatdigunakanpadaelemen CAPTION, TR, TD atau TH. • Jikapadaelemen CAPTION, atribut ALIGN akanmenentukanapakah caption munculdiatasataudibawahtabel.

  18. Perataan dalam tabel • Jikamunculdalamelemen TR, TH, atau TD atribut ALIGN akanmenentukanapakah data didalamseltabeldiratakankiri,tengah ataukanansel. • Perataanvertikaldinyatakandenganatributvaligndandapatdigunakanpadaelemen TR, TD, dan TH. • Atribut VALIGN menentukanapakah data dalamseltabeldiratakanpadabagianatassel, bawahsel, ataubagiantengahsecaravertikal. • Nilai-nilai =VALIGN=top(atas), VALIGN=middle(tengah), VALIGN=bottom(bawah).

  19. Contoh <table border=“1”> <tr> <th><br></th> <th>satu</th> <th>dua<th> <th>tiga</th> </tr> <tr> <th>menggunakan valign atas</th> <td ALIGN=“left” VALIGN=“top”>TI</td>

  20. Contoh <td ALIGN=“center” VALIGN=“top”>TA</td> <td ALIGN=“right” VALIGN=“top”>IF</td> </tr> <tr> <th>menggunakan valign tengah</th> <td ALIGN=“left” VALIGN=“middle”>TI</td> <td ALIGN=“center” VALIGN=“middle”>TA</td> <td ALIGN=“right” VALIGN=“middle”>IF</td> </tr>

  21. Contoh <tr> <th>menggunakan valign BAWAH</th> <td ALIGN=“left “VALIGN=“bottom”>TI</td> <td ALIGN=“center” VALIGN=“bottom”>TA</td> <td ALIGN=“right” VALIGN=“bottom”>IF</td> </tr> </TABLE>

  22. Mengatur lebar tabel • Lebartabeldiaturdenganatribut WIDTH. • Atributinidigunakanuntukmengubahlebartabelmaupunlebarkolomsuatutabel. • Atributinibisadigunakandalamelemen TABLE, TH, dan TD. • Nilaiatributinidinyatakandalam pixel maupunpersen. • Jikadidalamelemen TABLE atributinimenunjukkanlebartabelterhadap browser. • Jikadigunakandalamelemen TH dan TD nilainyamerupakanlebarkolomterhadaptabel

  23. contoh <table border width=“70%”> <caption align=bottom>Tabel dengan lebar 70% dari jendela browser</caption> <tr> <td width=“50%”>Width=50%</td> <td width=“50%”’>Width=50%</td> </tr> </table> <p><p>

  24. contoh <table border width=“100”> <caption align=bottom>Tabel dengan lebar 100% dari jendela browser</caption> <tr> <td width=“25”>Width=25</td> <td width=“75”>Width=75</td> </tr> </table>

  25. Penggunaan warna pada tabel • Untukmenentukanwarnalatarbelakangtabel, gunakanatribut BGCOLOR. • Sedangkanuntukmengubahwarna border tabelhanyadapatdilakukandalam IE yang menyediakanbeberapamacamatribut, yaitu BORDERCOLOR, BORDERCOLORLIGHT dan BORDERCOLORDARK. • Ketigaatributwarnauntuk border iniharusdigunakanbersama-samadenganaribut BORDER. • BORDERCOLORLIGHT untukmengubahwarna border dibagianatasdankiri. • BORDERCOLORDARK, digunakanuntukmengubahwarna border bawahdankanan. • BORDERCOLOR, digunakanuntukmengubahwarnakeseluruhan border.

  26. Contoh <center> <table border=“5” width=“110%” bordercolorlight=“blue” bordercolordark=“black”> <caption center valign=bottom>tabel berwarna</caption> <tr><tdbgcolor=“yellow”>kuning</td></tr> <tr><tdbgcolor=“white”>putih</td></tr> <tr><tdbgcolor=“aqua”>aqua</td></tr> <tr><tdbgcolor=“green”>hijau</td></tr> </table> </center>

  27. Mengatur spasi tabel • Ada dua atribut yang digunakan untuk mengatur spasi dalam tabel, yaitu CELLSPACING dan CELLPADDING. • CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat diantara dua buah sel dalam suatu tabel • CELLPADDING digunakan untuk menentukan jumlah spasi yang terdapat diantara border sel dan dengan isi yang ada di dalam sel tersebut.

  28. contoh <table border=“5” cellspacing=“10” cellpadding=“15”> <tr> <td>Sistem</td> <td>sistem</td> <td>sistem</td> </tr> <tr> <td>Informasi</td> <td>informasi</td> <td>Informasi</td> </tr> </table>

  29. Menggabungkan kolom dan baris • Anda dapat menggabungkan dua atau lebih kolom / baris menjadi satu kolom / baris. • Atribut yang digunakan untuk menggabungkan kolom adalah COLSPAN. • Atribut yang digunakan untuk menggabungkan baris adalah ROWSPAN.

  30. Contoh colspan dan rowspan <table > <caption>COLSPAN</caption> <tr> <td>1</td> <td colspan=“2”>2</td> </tr> <tr> <td>1</td> <td>2.1</td> <td>2.2</td> </tr> </table> <table border=“1”> <caption>ROWSPAN</caption> <tr> <td rowspan=2>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>2</td> <td>3</td> <td>4</td> </tr> </table>

More Related