1. REEM ALMOTIRI Information Technology Department Majmaah University

2. Lecture 5

3. Contents: Tables

4. 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

5. 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

6. Basic Table Structure One column: 100 Example

7. 300200100 600500400 900800700 Add the following table to your page note: the table without borders Basic Table Structure

8. 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.

9. Table Headings Name Telephone Bill Gates 555 77 854 Example

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

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

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

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

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

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

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

17. 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

18. 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

19. 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