University of Computer Studies
Tables
Table Overview
University of Computer Studies
HTML Group
Department of Information Technology
Supporting and Maintenance
Objectives
To create a table on a web page
To apply attributes to format tables, table rows and table cells
To organize information on a table
To modify web page layouts
To identify style an HTML table with CSS
Learning Outcomes
how to create a basic table with the table, table rows, table column, table caption and table
cells elements
become recognize with coding HTML tables to organize information on a web page
how to compose the table of rows and columns
how to create a table with CSS property
Outlines
HTML Table
HTML Table Elements
HTML Common Table Attributes
HTML Table Examples
Summary
Next Lecture
References
HTML Table
widely used in communication, research, and data analysis
useful for various tasks such as presenting text information and numerical data
can be used to compare two or more items in tabular form layout
used on web pages to organize tabular information
HTML Table Elements
Each individual table cell is at the intersection of a specific row and column
Configure with table, tr, and td elements
Each table begin with a <table> tag and ends with a </table> tag
Each table row begin with a <tr> tag and ends with a </table> tag
Each table cell(table data) begin with a <td> tag and ends with a </td> tag
The caption begins with a <caption> tag and ends with a </caption> tag
HTML Table Attributes
Table 1: Commonly used attributes of the table element
Attribute Value Purpose
align left(default), right, center Horizonal alignment of the table (absolete in HTML5)
bgcolor Valid color value Background color of the table (absolete in HTML5)
boder 0 Default; there is no visible border (absolete in HTML5)
1-100 Visible border with pixel width specified
cellpadding Numeric value Specifies the space between the cell content and its border
cellspacing Numeric value Border spacing specifies the space between the cells
HTML Table Examples
Figure 1: Table with three rows three columns, and a border
HTML Table Examples
Figure 2: Table with caption
Summary
Introduce the HTML and CSS techniques used to create and configure table on web pages
Next Lecture
Table Rows, Cells and Headers
References
Terry Felke-Morris, “Web Development and Design
Foundations with HTML5”, 6th Edition.
Jon Duckett, “Beginning HTML, XHTML, CSS, and
JavaScript”.
University of Computer Studies
