Department of Information Technology Chapter 9 – Creating Tables Lecturer: Ms Melinda Chung.

Department of Information Technology

Chapter 9 – Creating Tables

Lecturer: Ms Melinda Chung


2 of 21

Tables Provide a quick and concise method of presenting information

A 2 dimensional representation of data

View as a collection of rows and columns to organize and display data

A cell - the intersection of a row and a column

Each row is made up of data cells or columns


3 of 21

The W3C discourages using tables for document layout because tables can be difficult for non-visual user agents to interpret

User agents with small monitors, such as Personal Digital Assistants (PDAs), and browsers that use large fonts may have difficulty rendering a Web page that is laid out using tables

Creating Basic Tables


4 of 21

Tables - basic tags

The following tags are used to create tables: <table>, </table> - Defines the beginning and end of

a table <caption>,</caption> - give a title to a table <tr>,</tr> - Defines the beginning and end of a table

row <th>, </th> - Defines row or column headings <td>, </td> - Defines the data in each cell of a table

row


5 of 21

Tables

• need to specify the contents of the respective cells

• defined within the <table> and </table> tags

• each row in your table requires <tr> and </tr> tags

• after defining a row, you then define each of the columns with the <td> and </td> tags


6 of 21

Tables

A simple table:

<table> <tr> <td>Row 1 Column 1 </td>

<td>Row 1 Column 2 </td> </tr> <tr>

<td>Row 2 Column 1 </td><td>Row 2 Column 2 </td>

</tr> </table>


7 of 21

Table Widths

width="80%” - specifies the size of the table, can be stated as a percentage or a fixed number of pixelsEg: <table border=“2” width=“450”>


8 of 21

Horizontal Alignment

You can use the align attribute to adjust the horizontal alignment of the contents of all table elements with the exception of the <table> and <caption> elements

The values you can assign to the align attribute are left, center, right, and justify


9 of 21

Example: Schedule Table


10 of 21

Example: Schedule Table

Schedule table after adjusting the width to 100% and centering the cells


11 of 21

Borders

<table> element’s border attribute to add a border to a table

The value assigned to the border attribute determines the thickness of the border in pixels

border="num” - sets size of the table border, where “0” is no border


12 of 21

Borders

Table with a 5-pixel border in a Web browser


13 of 21

Displaying Empty Cells

Web browsers do not render the borders around empty cells

To fix this problem, you need to add a <td> element for each empty cell, and include a non-breaking space character entity ( )as each cell’s content

Blank cells with border <td></br></td>, <td><br></br></td>

Blank cells without border <td></td>, <td></td>


14 of 21

Displaying Empty Cells

Missing borders around empty cells


15 of 21

Cell Margins

cellspacing attribute specifies the amount of horizontal and vertical space between table cells

assign a value to the cellspacing = “n” representing the number of pixels that you want between table cells

cellpadding attribute specifies the amount of horizontal and vertical space between each cell’s border and the contents of the cell


16 of 21

Cell MarginsAdd cellspacing & cellpadding to table

<table cellspacing=10, cellpadding=10>, adding 10 pixels of spacing between cells and spacing within the cells in the table


17 of 21

Cells that Span Multiple Rows or Columns

You can cause cells to span multiple rows or columns by including the rowspan or colspan attributes in the <td> or <th> elements

An example of the colspan attribute, the table in next slide shows a breakdown of the animal kingdom into phylum and class


18 of 21

Cells that Span Multiple Rows or Columns

Table with cells that span multiple rows


19 of 21

Tables - more attributes

<caption>, align (attribute) = top/bottom, default is center

<th>, <tr>, <td> can have align (attribute)= left/right/center, bgcolor (attribute), width (attribute)


20 of 21

Table display

Image displayed in a table


21 of 21

Some Sites for your reference

Good website design: - http://www.fixingyourwebsite.com/ - http://www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/567

Bad examples: http://www.fixingyourwebsite.com Lots of information on XHTML http://www.w3schools.com The definitive XHTML site http://www.w3.org/TR/xhtml1/ XHTML validator http://validator.w3.org/

Department of Information Technology Chapter 9 – Creating Tables Lecturer: Ms Melinda Chung.

Documents

Transcript of Department of Information Technology Chapter 9 – Creating Tables Lecturer: Ms Melinda Chung.