TEACHING PRESENTATIONTABLESPrepared by Dale Offret

CIT 230 09

Fall 2014

TABLE DESCRIPTION AND USES

Tables are two dimensional grids or matrices displaying information in a comparative manner.

Tables are useful in displaying sets of lists that need more than one column to properly represent the data. A list of only one column could use an ordered/unordered lists to obtain the same result.

TECHNICAL TAG DECLARATION

Tables are defined through the use of <table> and </table>.

Tables are made up of any number of rows using <tr> and </tr>.

Table rows contain table data <td> or table headers <th>.

Table headers, <th> and </th>, are given a different display mode to show it is a column header. The cell is dark filled rather than white filled like <td> cells.

Each table row is made up of any number of <th> or <td> elements. A group of <td> </td> declaration comprise the row elements to be displayed left to right.

TAG INFORMATION AND STYLING

Table data <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc.

Add a simple border for an entire table. Eg. <table border=“1”>. By default, tables have a hidden border.

Table data cells can span columns using “colspan=#ofColumns”. Eg. <th colspan=“2”>Telephone</th> This single cell spans two columns of telephone numbers.

Styling can be performed in-page, but CSS separation is preferred.

TABLE HEADER, BODY, FOOTER

Groups of table rows, <tr>, can be grouped together for the purpose of applying different styling values to each. An example of this is available on the next slide.

Table header, <thead> </thead>.

Table body, <tbody> </tbody>.

Table footer, <tfoot> </tfoot>.

PUT IT ALL TOGETHER

SOURCES

http://www.w3schools.com/html/html_tables.asp

https://www.udemy.com/blog/html5-tables/