REEM ALMOTIRI Information Technology Department Majmaah University

Lecture 5

Contents: Tables

Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the tag).td stands for "table data".A tag can contain text, links, images, lists, forms, other tables,etc

HTML Tables : Basic Table Structure Table Headings Table with a caption Table cells that span more than one row/column Cell Padding and Cell Spacing

Basic Table Structure One column: 100 Example

Add the following table to your page note: the table without borders Basic Table Structure

Table Headings Header information in a table are defined with the tag. All major browsers display the text in the element as bold and centered.

Table Headings Name Telephone Bill Gates Example

Table Headings SaturdaySunday Tickets sold: Total sales:600$675$ write the appropriate html code to design the following table :

Table with a caption Monthly savings Month Savings January $100 Example

Table cells that span more than one column 9am 10am 11am 12am Monday Geography Math Art Example

Table cells that span more than one row ABC BBC CNN 6pm - 7pm Movie Comedy News 7pm - 8pm Sport Current Affairs Example

Cell Padding and Cell Spacing Cell padding :control the white space between cell content and the borders Cell spacing :control the distance between cells

Cell Padding and Cell Spacing ABC BBC CNN 6pm - 7pm Movie Comedy News 7pm - 8pm Sport Current Affairs Example

HTML Table Tags TAGDescription Defines a table Defines a table header Defines a table row Defines a table cell Defines a table caption

Attributes ValueDescription alignRight, Left,CenterSpecifies the alignment of a table bgcolor #XXXXXX Color name RGB value Specifies the background color for a table borderNumber Specifies the width of the borders around a table cellpaddingNumber Specifies the space between cell wall and cell contents cellspacingNumberSpecifies the space between cells widthNumberSpecifies the width of a table heightNumberSpecifies the height of a table

Attributes ValueDescription align Right Left Center Aligns the content in a table row bgcolor #XXXXXX Color name RGB value Specifies the background color for a table row valign Top Middle Bottom Vertical aligns the content in a table row

Attributes ValueDescription align Right Left Center Aligns the content in a cell bgcolor #XXXXXX Color name RGB value Specifies the background color of a cell valign Top Middle Bottom Vertical aligns the content in a cell colspannumberMerge number of columns rowspannumberMerge number of rows