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:, - Defines the beginning and end of a table, - give a title to a table, - Defines the beginning and end of a table row, - Defines row or column headings, - 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 and tags each row in your table requires and tags after defining a row, you then define each of the columns with the and tags

Department of Information Technology 6 of 21 Tables A simple table: Row 1 Column 1 Row 1 Column 2 Row 2 Column 1 Row 2 Column 2

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 pixels Eg:

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 and 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 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 element for each empty cell, and include a non-breaking space character entity ( ) as each cell’s content Blank cells with border, Blank cells without border,

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 Margins Add cellspacing & cellpadding to table, 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 or 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, align (attribute) = top/bottom, default is center,, 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: Bad examples: Lots of information on XHTML The definitive XHTML site XHTML validator