Transcript Department of Information Technology

Department of Information Technology
Chapter 9 – Creating
Tables
Lecturer: Ms Melinda Chung
Tables
Department of
Information Technology

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
2 of 21
Creating Basic Tables
Department of
Information Technology
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

3 of 21
Tables - basic tags

Department of
Information Technology
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
4 of 21
Tables
Department of
Information Technology
•
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
5 of 21
Tables
Department of
Information Technology
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>
6 of 21
Table Widths

Department of
Information Technology
width="80%” - specifies the size of the table, can be stated as
a percentage or a fixed number of pixels
Eg: <table border=“2” width=“450”>
7 of 21
Horizontal Alignment
Department of
Information Technology
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
 You
 The
values you can assign to the
align attribute are left, center,
right, and justify
8 of 21
Example: Schedule Table
Department of
Information Technology
9 of 21
Example: Schedule Table
Department of
Information Technology
Schedule table after adjusting the width to 100% and
centering the cells
10 of 21
Borders
Department of
Information Technology

<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
11 of 21
Borders
Department of
Information Technology
Table with a 5-pixel border in a Web browser
12 of 21
Displaying Empty Cells
Department of
Information Technology

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
(&nbsp;)as each cell’s content

Blank cells with border


<td></br></td>, <td><br></br></td>
Blank cells without border

<td></td>, <td></td>
13 of 21
Displaying Empty Cells
Department of
Information Technology
Missing borders around empty cells
14 of 21
Cell Margins
Department of
Information Technology
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

15 of 21
Cell Margins
Department of
Information Technology
Add cellspacing & cellpadding to table
<table cellspacing=10, cellpadding=10>, adding 10 pixels of
spacing between cells and spacing within the cells in the
table
16 of 21
Cells that Span Multiple
Rows or Columns
Department of
Information Technology
 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
17 of 21
Cells that Span Multiple
Rows or Columns
Department of
Information Technology
Table with cells that span multiple rows
18 of 21
Tables - more attributes


Department of
Information Technology
<caption>, align (attribute) = top/bottom, default
is center
<th>, <tr>, <td> can have align (attribute)=
left/right/center, bgcolor (attribute), width
(attribute)
19 of 21
Table display
Department of
Information Technology
Image displayed in a table
20 of 21
Some Sites for your reference
Department of
Information Technology








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/
21 of 21