List & Tables.

Presentasi berjudul: "List & Tables."— Transcript presentasi:

1 List & Tables

2 List Setiap list memiliki format masing-masing dengan tujuan untuk menampilkan list sesuai dengan yang diinginkan. Ada empat tipe list: Plain Numbered Bulleted Definition

3 Unordered Lists Jenis ini bisa jadi merupakan list yang paling banyak dipakai di dunia Digunakan untuk menampilkan daftar yang tidak memerlukan urutan tertentu

4 Browser Display Code HTML SimCity Quake Bridge <UL>
<LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </UL> SimCity Quake Bridge

5 <UL> Un-ordered List <LI> Line Item

6 Browser Display HTML Code SimCity Quake Bridge
<UL type = “circle”> <LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </UL> SimCity Quake Bridge

7 Nested List Browser Display SimCity Quake II SimCity 3000 Quake III
<UL> <LI>SimCity</LI> <LI>Quake II</LI> <LI>SimCity 3000</LI> <LI>Quake III</LI> </UL> <LI>Bridge</LI> SimCity Quake II SimCity 3000 Quake III Bridge

8 Ordered List Tipe list ini sangat tepat untuk menampilkan instruksi langkah demi langkah, misalnya berupa tutorial List dapat dibuat dibagian mana saja dalam halaman web

9 List berupa nomor, bukan bullet
Ordered List Browser Display OL, bukan UL <OL> <LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </OL> SimCity Quake Bridge List berupa nomor, bukan bullet

10 Browser Display Ordered List SimCity Quake Bridge
<OL type = “a”> <LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </OL> SimCity Quake Bridge

11 Memulai List Dengan Awal Nomor Yang Berbeda
Browser Display SimCity Quake Bridge

12 Tipe Ordered List type Result “A” A, B, C, … “a” a, b, c, … “I”
I, II, III, IV, … “i” i, ii, iii, iv, … “1” 1, 2, 3, …

13 Ordered List Browser Display <OL start = “25”>
<LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </OL> SimCity Quake Bridge

14 Contoh Penggunaan List

15 Tabel

16 Mendefinisikan Struktur Tabel
Langkah pertama dalam membuat tabel adalah menentukan struktur tabel yang akan dibuat: Jumlah baris dan kolom Lokasi header kolom Setelah struktur tabel terbuat, anda bisa mulai memasukkan data ke dalamnya.

17 Menggunakan tag<table>, <tr>, dan<td>
Tabel dalam HTML selalu di awali dengan tag <table> dan diakhiri dengan </table>. Setiap baris dari tabel diindikasikan dengan tag <tr> (table row). Setiap baris pada tabel, terdapat <td> dan </td> (table data) yang mengindikasikan adanya sebuah cell data

18 Syntax Tabel Dasar <table> <tr>
<td> First Cell </td> <td> Second Cell </td> </tr> <td> Third Cell </td> <td> Fourth Cell </td> </table> two rows two columns

19 Kolom dalam Table HTML tidak menyediakan sebuah tag untuk membuat kolom dalam tabel Jumlah kolom ditentukan dari berapa jumlah cell yang ada pada tiap barisnya Misalnya, anda memiliki empat tag <td> di setiap baris pada tabel, maka tabel tersebut punya empat kolom HTML versi berikutnya direncanakan akan memilliki dukungan untuk mengontrol tampilan kolom tabel

20 HTML Structure of a Table
beginning of the table structure first row of six in the table end of the table structure table cells

21 Creating Headings with the <th> Tag
HTML menyediakan tag <th> untuk header tabel. Text yang berada dalam tag <th> akan tertulis pada posisi tengah dan tertulis tebal. Tag <th> biasanya digunakan untuk header tabel, akan tetapi anda bisa menggunakannya di cell mana saja yang ingin tertulis di tengah dan tebal.

22 Menambahkan Table Heading
table headings

23 Menambahkan Table Border
Secara default, browser menampilkan tabel tanpa garis tepi. Sebuah garis tepi atau border dapat ditambahkan sebagai attribute pada tag <table> Syntax untuk menambahkan border: <table border=“value”> value adalah lebar dari garis yang diinginkan Ukurannya opsional, secara default akan ditampilkan 1 pixel.

24 Variasi ukuran tabel border
Tampilan tabel dengan ukuran border yang bervariasi

25 Menambahkan border 5px Hanya bagian luar yang terkena efeknya, bagian gridlines tidak terpengaruh

26 Mengontrol Spasi Cell atribut cellspacing akan mengatur jarak antara cell satu dengan lainnya. Syntaxnya seperti berikut ini: <table cellspacing=“value”> value merupakan besar nilai jarak yg diinginkan Nilai defaultnya adalah 2 pixels

27 Defining Cell Padding Untuk mengontrol ruang antara isi dalam tabel dengan garis tepi cell dapat digunakan tag cellpadding Syntaxnya: <table cellpadding=“value”> value adalah besaran nilai jarak yang diinginkan Nilai defaultnya adalah 1 pixel

28 Variasi Nilai Cellspacing dan Cellpadding
Variasi nilai cellpadding

29 Mendefinisikan Ukuran Tabel
Syntaxnya: <table width=“size” height=“size”> size berisi ukuran yang diinginkan Untuk menghasilkan table yang lebar dan tingginya sesuai dengan lebar dan tinggi area display, maka set ukurannya menjadi height=“100%”. Jika anda mengatur ukurannya dalam bentuk yg telah fix berdasarkan ukuran pixel, maka ditampilkan dalam resolusi berapapun hasilnya akan tetap sama.

30 Setting the Width of the Table to 500 Pixels

31 Defining Cell and Column Sizes
To set the width of an individual cell, add the width attribute to either the <td> or <th> tags. The syntax is: width=“value” value can be expressed in pixels or as a percentage of the table width width value of 30% displays a cell that is 30% of the total width of table. The height attribute can also be used in the <td> or <th> tags to set the height of individual cells. The height attribute is expressed either in pixels or as a percentage of the height of the table. If you include more text than can be displayed within that height value you specify, the cell expands to display the additional text.

32 Defining Cell and Column Sizes
Specifying a width for an individual cell does not guarantee that the cell will be that width when displayed in the browser. the reason for this is that the cell is part of a column containing other cells. Set the width of all the cells in the column to the same value to ensure that the cells do not change in size.

33 Aligning a Table on the Web Page
By default, a browser places a table on the left margin of a Web page, with surrounding text placed above and below the table. To align a table with the surrounding text, use the align attribute as follows: align=“alignment” alignment equals “left”, “right”, or “center” left or right alignment places the table on the margin of the Web page and wraps surrounding text to the side center alignment places the table in the horizontal center of the page, but does not allow text to wrap around it The align attribute is similar to the align attribute used with the <img> tag. The align attribute is available only with browsers that support HTML 3.2 or later.

34 Results of a Right-Aligned Table

35 Aligning the Contents of a Table
By default, cell text is placed in the middle of the cell, aligned with the cell’s left edge. By using the align and valign attributes, you can specify the text’s horizontal and vertical placement. To align the text for a single column, you must apply the align attribute to every cell in that column.

36 Values of the Align and Valign Attributes

37 Spanning Rows and Columns
To merge several cells into one, you need to create a spanning cell. A spanning cell is a cell that occupies more than one row or column in a table. Spanning cells are created by inserting the rowspan and colspan attribute in a <td> or <th> tag. The syntax for these attributes is: rowspan=“value” colspan=“value” value is the number of rows or columns that the cell spans in the table

38 Example of Spanning Cells
This cell spans two columns and two rows this cell spans three columns This cell spans three rows

39 A Table Structure with a Row-Spanning Cell
HTML code resulting table four table cells in the first row only three table cells are required for the second and third rows

40 Adding Spanning Cells to a Table

41 Another Example of Spanning Cells

42 Another Example of Spanning Cells

43 Applying a Background Color
Table elements support the bgcolor attribute. To specify a background color for all of the cells in a table, all of the cells in a row, or for individual cells, by adding the bgcolor attribute to either the <table>, <tr>, <td>, or <th> tags as follows: <table bgcolor=“color”> <tr bgcolor=“color”> <td bgcolor=“color”> <th bgcolor=“color”> color is either a color name or hexadecimal color value

44 Specifying Table, Row, and Cell Colors

45 Specifying Table, Row, and Cell Colors

46 The bordercolor Attribute
By default, table borders are displayed in two shades of gray that create a three-dimensional effect. The syntax for the bordercolor attribute is: <table bordercolor=“color”> color is an HTML color name or hexadecimal color value Internet Explorer and Netscape apply this attribute differently. <table border=“10” bordercolor=“blue”> Internet Explorer Netscape

47 Applying a Table Background
Add a background image to your tables using the background attribute. A background can be applied to the entire table or to a cell. parch.jpg <table background=“parch.jpg”> <td background=“parch.jpg”>

48 Designing a Page Layout with Tables
HTML tables are most often used to define the layout of an entire Web page. If you want to design a page that displays text in newspaper style columns, or separates the page into distinct sections, you’ll find tables an essential and useful tool.

49 Table Layout of a Web Page
4) address and phone number 1) newspaper logo 2) list of links 3) articles 620 pixels 500 pixels 120 pixels a sample table layout of a Web page.

50 a sketch of a web page using nested tables
Tables can be created within another table making the Web page easier to manage. a sketch of a web page using nested tables

51 The Result of the Web Page using Nested Tables
a sample web page using nested tables

52 Beberapa desain Tabel

53 Beberapa desain Tabel

54 Beberapa desain Tabel