Pemprograman basis web andri wijaya s kom
This presentation is the property of its rightful owner.
Sponsored Links
1 / 32

Pemprograman BaSIS Web Andri Wijaya , S.Kom PowerPoint PPT Presentation


  • 129 Views
  • Uploaded on
  • Presentation posted in: General

Pemprograman BaSIS Web Andri Wijaya , S.Kom. Pertemuan 7 TABEL. 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>…</TR>

Download Presentation

Pemprograman BaSIS Web Andri Wijaya , S.Kom

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Pemprograman basis web andri wijaya s kom

PemprogramanBaSIS WebAndriWijaya, S.Kom

Pertemuan 7

TABEL


Tabel

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>…</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>…</TD>.

    • Tabel Header adalah judul tabel yang biasanya terletak dibagian paling atas atau paling kiri dari suatu tabel.Tabel header yang terletak dibagian atas adalah judul kolom tabel, sedang tabe deader yang terletak dibagian kiri adalah judul baris tabel. Tabel header dinyatakan dengan pasangan tag <TH>…</TH>


Tabel1

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>.


Tabel2

TABEL

  • Selain elemen – elemen tersebut tabel juga mempunyai beberapa atribut :

    • Border, untuk membuat batas tepi dari suatu tabel

    • Width, untuk mengatur lebar tabel

    • Align, untuk mengatur bentuk perataan horizontal data di dalam tabel, seperti dikiri, ditengah atau dibagian kanan.

    • Valign, untuk mengatur perataan vertikal dari suatu data, seperti di atas, ditengah atau dibawah.


Tabel3

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


Membuat tabel sederhana

Membuattabelsederhana

  • Untuk pembuatan tabel didalam HTML kita hanya perlu menggunakan tag berpasangan yaitu : <TABLE>…</TABLE>

    <TABLE>

    <TD>Tabel sederhana tanpa border</TD>

    </TABLE>

  • Terlalu sederhana untuk dianggap sebagai tabel maka kita bisa menambahkan atribut border

    <TABLE BORDER>

    <TD>Tabel sederhana dengan suatu border</TD>

    </TABLE>


Membuat tabel sederhana1

Membuattabelsederhana

  • Untuk memulai membuat tabel sederhana kita memulainya dengan menggunakan tag <table>…</table>

  • Didalam tag ini anda 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>

    <td>Tabel sederhana Tanpa Border</td>

    </table>


Membuat tabel sederhana2

Membuattabelsederhana

  • contoh diatas terlalu sederhana untuk dianggap sebagai sebuah tabel.Untuk itu anda dapat menambahkan border atau batas tabel. Sehingga tabel anda benar-benar terlihat seperti sebuah tabel yang sesungguhnya.

  • Untuk membuat border tabel, gunakan atribut BORDER seperti berikut:

    <table border>

    <td>Tabel sederhana dengan suatu border</td>

    </table>


Membuat tabel sederhana3

Membuattabelsederhana

  • 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>

    <td>Tabel sederhana dengan lebar border = 5</td>

    </table>


Tabel dua dimensi

Tabelduadimensi

  • 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 satu</td>

    <td>kolom satu</td>

    </table>


Tabel dua dimensi1

Tabelduadimensi

  • Untuk membuat tabel dua dimensi, anda perlu menggunakan elemen TR (Table row), misalkan kita menambahkan satu baris lagi dengan jumlah kolom yang sama.

    <TABLE BORDER=5>

    <TR>

    <TD>Baris 1, kolom1</TD>

    <TD>Baris1, kolom2</TD>

    <TD>Baris1, kolom3</TD>

    </TR>


Tabel dua dimensi2

Tabelduadimensi

<TR>

<TD>Baris 2, kolom 1</TD>

<TD>Baris 2, kolom 2</TD>

<TD>Baris 2, kolom 3</TD>

</TR>

</TABLE>


Menambahkan judul tabel

Menambahkanjudultabel

  • 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 / caption</b>

    </caption>


Membuat sel kosong

Membuatselkosong

  • Tabel yang mempunyai judul kolom dan judul baris biasanya akan memiliki suatu sel kosongpada bagian kiri atasnya.

  • Untuk membuat sel kosong anda cukup mendefenisikan sel tersebut dengan elemen TH atau TD tanpa disertai dengan data apapun didalamnya.

    <table border=5>

    <tr>

    <td></td>

    <th>HTML</th>

    <th>Java</th>


Membuat sel kosong1

Membuatselkosong

<th>VRML</th>

</tr>

<tr>

<th>Pagi</th>

<td>penuh</td>

<td>kosong</td>

<td>kosong</td>

</tr>

</table>


Perataan dalam tabel

Perataandalamtabel

  • Dalam tabel ada 2 macam perataan yaitu perataan horisontal dan perataan vertikal.

  • Horisontal orientasinya ke kiri, kanan, dan tengah.

  • Vertikal orientasinya ke atas, bawah dan tengah.

  • Perataan horisontal dinyatakan dengan atribut ALIGN dan dapat digunakan pada elemen CAPTION, TR, TD atau TH.

  • Jika pada elemen CAPTION, atribut ALIGN akan menentukan apakah caption muncul di atas(ALIGN=TOP) atau di bawah(ALIGN=BOTOOM) tabel.Default nilai ALIGN pada suatu CAPTION adalah TOP.


Perataan dalam tabel1

Perataandalamtabel

  • Jika muncul dalam elemen TR, TH, atau TD atribut ALIGN akan menentukan apakah data didalam sel tabel diratakan kiri,tenah atau kanan sel.Nilai-nilai ALIGN pada elemen tersebut adalah ALIGN=left,ALIGN=center,dan ALIGN=right.

  • Perataan vertikal dinyatakan dengan atribut VALIGN dan dapat digunakan pada elemen TR, TD, dan TH, tetapi tidak dapat pada elemen CAPTION.

  • Atribut VALIGN menentukan apakah data dalam sel tabel diratakan pada bagian atas sel, bawah sel, atau bagian tengah secara vertikal.

  • Nilai-nilai =VALIGN=top(diatas), VALIGN=middle(ditengah), VALIGN=bottom(dibawah).


Contoh

Contoh

<table border>

<tr>

<th><br></th>

<th><h1>KIRI</h1></th>

<th><h1>TENGAH</h1></th>

<th><h1>KANAN</h1></th>

</tr>

<tr>

<th><h1>ATAS</h1></th>

<td ALIGN=left VALIGN=top>KA</td>


Contoh1

Contoh

<td ALIGN=center VALIGN=top>TA</td>

<td ALIGN=right VALIGN=top>KA</td>

</tr>

<tr>

<th><h1>TENGAH</h1></th>

<td ALIGN=left VALIGN=middle>KA</td>

<td ALIGN=center VALIGN=middle>TA</td>

<td ALIGN=right VALIGN=middle>KA</td>

</tr>


Contoh2

Contoh

<tr>

<th><h1>BAWAH</h1></th>

<td ALIGN=left VALIGN=bottom>KA</td>

<td ALIGN=center VALIGN=bottom>TA</td>

<td ALIGN=right VALIGN=bottom>KA</td>

</tr>

</TABLE>


Mengatur lebar tabel

Mengaturlebartabel

  • Lebar tabel diatur dengan atribut WIDTH.

  • Atribut ini digunakan untuk mengubah lebar tabel maupun lebar kolom suatu tabel.

  • Atribut ini bisa digunakan dalam elemen TABLE, TH, dan TD.

  • Nilai atribut ini dinyatakan dalam pixel maupun persen.

  • Jika didalam elemen TABLE atribut ini menunjukan lebar tabel terhadap browser.

  • Jika digunakan dalam elemen TH dan TD nilainya merupakan lebar kolom terhadap tabel


Contoh3

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>

<tr>

<td>Lebar sel 50% dari lebar tabel</td>

<td>lebar sel 50% dari lebar tabel</td>

</tr>

</table>

<p><p>


Contoh4

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>

<tr>

<td>Lebar sel 25% dari lebar tabel</td>

<td>lebar sel 75% dari lebar tabel</td>

</tr>

</table>


Penggunaan warna pada tabel

Penggunaanwarnapadatabel

  • Untuk menentukan warna latar belakang tabel, gunakan atribut BGCOLOR.

  • Sedangkan untuk mengubah warna border tabel hanya dapat dilakukan dalam IE yang menyediakan beberapa macam atribut, yaitu BORDERCOLOR, BORDERCOLORLIGHT dan BORDERCOLORDARK.

  • Ketiga atribut warna untuk border ini harus digunakan bersama-sama dengan aribut BORDER.

  • BORDERCOLORLIGHT untuk mengubah warna border dibagian atas dan kiri.

  • BORDERCOLORDARK, digunakan untuk mengubah warna border bawah dan kanan.

  • BORDERCOLOR, digunakan untuk mengubah warna keseluruhan border.


Contoh5

Contoh

<center>

<table border=5 width=20% bordercolorlight=‘red’ bordercolordark=‘yellow’>

<caption center valign=bottom>tabel berwarna</caption>

<tr><td>bgcolor=red>Merah</td></tr>

<tr><td>bgcolor=white>putih</td></tr>

<tr><td>bgcolor=black>hitam</td></tr>

<tr><td>bgcolor=green>hijau</td></tr>

</table>

</center>


Mengatur spasi tabel

Mengaturspasitabel

  • 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.


Contoh6

contoh

<table border=5 cellspacing=10 cellpadding=15>

<tr>

<td>ABC</td> <td>ABC</td> <td>ABC</td>

</tr>

<tr>

<td>ABC</td> <td>ABC</td> <td>ABC</td>

</tr>

</table>


Menggabungkan kolom dan baris

Menggabungkankolomdanbaris

  • 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.

  • Kedua atribut itu bisa muncul pada sembarang sel dalam suatu tabel (TH atau TD) dan untuk menggunakanya cukup dengan menentukan berapa banyak kolom atau baris yang akan digabungkan.


Contoh menggabungkan kolom

Contohmenggabungkankolom

<table border>

<caption>COLSPAN</caption>

<tr>

<td>1</td>

<td colspan=2 align=center>2</td>

</tr>

<tr>

<td>1</td>

<td>2A</td> <td>2B</td>

</tr>

</table>


Contoh menggabungkan baris

Contohmenggabungkanbaris

<table border>

<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>


Atribut nowrap

Atributnowrap

  • Dalam satu sel terkadang isi suatu sel terbagi menjadi beberapa baris.

  • Jika anda menginginkan isi sel tersebut muncul dalam satu baris saja maka anda memerlukan atribut NOWRAP.

  • Atribut ini khususnya digunakan dalam elemen TH dan TD.

  • Atribut ini justru berlawanan dengan elemen BR yang memecah suatu baris menjadi beberapa baris.

  • Penggunaan atribut WIDTH juga tidak akan memberikan pengaruh jika panjang teks melebihi lebar dari atribut WIDTH yang ditentukan.


Atribut nowrap1

Atributnowrap

<table border>

<tr>

<td width=20% nowrap>Lebar dari atribut WIDTH tidak akan berpengaruh</td>

<td width=80%>jika atribut NOWRAP digunakan</td>

</tr>

</table>


  • Login