Download - Department of Information Technology Chapter 9 – Creating Tables Lecturer: Ms Melinda Chung
Department of Information Technology
Chapter 9 – Creating Tables
Lecturer: Ms Melinda Chung
Department of Information Technology
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
Department of Information Technology
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
Department of Information Technology
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
Department of Information Technology
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
Department of Information Technology
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>
Department of Information Technology
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”>
Department of Information Technology
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
Department of Information Technology
9 of 21
Example: Schedule Table
Department of Information Technology
10 of 21
Example: Schedule Table
Schedule table after adjusting the width to 100% and centering the cells
Department of Information Technology
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
Department of Information Technology
12 of 21
Borders
Table with a 5-pixel border in a Web browser
Department of Information Technology
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>
Department of Information Technology
14 of 21
Displaying Empty Cells
Missing borders around empty cells
Department of Information Technology
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
Department of Information Technology
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
Department of Information Technology
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
Department of Information Technology
18 of 21
Cells that Span Multiple Rows or Columns
Table with cells that span multiple rows
Department of Information Technology
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)
Department of Information Technology
20 of 21
Table display
Image displayed in a table
Department of Information Technology
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/