Web Design (9) Tables

HTML Tables (1) HTML Tables may be used to organise calendars, schedules, statistics and other information that can be arranged in rows and columns. Cells within the html table may contain numbers, text, images or other multimedia objects.

HTML Tables (2) Before style sheets (CSS), tables were the only option for creating multi-column layouts. When using html tables, problems arise with small screens and not being able to see the table as a whole e.g. bus timetables.

HTML Tables (3) All the table’s content goes into cells, arranged in rows. Cells contain header information or data. Tables use the following tags: table row table header cell table data cell

A Simple Table Example: A small table, with 3 rows and 3 columns, that lists nutritional information. Menu ItemCaloriesFat (g) Chicken Noodle Soup Caesar Salad

Nutritional Data Exercise Menu Item Calories Fat (g) Chicken Noodle Soup Caesar salad

Notes on HTML Tables (1)The element can only contain and elements. (2) The number of rows is defined by the number of elements, whereas the number of columns is defined by the number of and elements. (3) Within the element, information can only be contained within a or element.

Bringing some shape to your table Returning to your ‘nutritonal information’ table, add the following attributes to the opening table tag: Save, Validate, Live Preview. What do you notice? Now, change the attribute values and note how things change!

Exercise – Beatles Albums Create the code for an HTML Table using the following information: AlbumYear Rubber Soul1965 Revolver1966 Sgt. Pepper1967 White Album1968 Abbey Road1969

Making cells larger (1) Column Spans The Column Span is created with the ‘colspan’ attribute in the or elements. It stretches a cell to the right to span over subsequent columns. Exercise: Write the following code into an html file in brackets:

Exercise – Colspan (1) <table width=“ ” border=“ ” align=“ ” cellpadding=“ ” cellspacing=“ ”> Fat Saturated Fat (g) Unsaturated Fat (g)

Exercise – Colspan (2) What do you notice about the table header cell? The one item ‘Fat’ in the header is spread over 2 columns above the 2 items in the table data cells.

TV Programmes Table (using colspan) Create the code for a HTML Table using the following TV Programme information: Start times:7:007:308:00 BBC1 One Show Country File ITV1Cricket Highlights Emmerdale Film4 Lady and the Tramp (Notes: ‘One Show’ and ‘Emmerdale’ – half an hour; ‘Cricket Highlights’ and ‘Country File – one hour; ‘Lady and the Tramp’ – one hour and a half)

Making cells larger (2) Row Spans Row Spans are created with the ‘rowspan’ attribute. They cause the cell to span downward over several rows. Exercise: Write the following code into an html file in brackets:

Exercise: Rowspan (1) <table width=“ ” border=“ ” align=“ ” cellpadding=“ ” cellspacing=“ ”> Serving Size Small (200g) Medium (400g) Large (600g)

Exercise: Rowspan (2) What do you notice about the table header cell? The one item ‘Serving Size’ in the header is spread over 3 rows to the left of the 3 items in the table data cells.

Fruit Exercise Create the code for an HTML table using the following information:

Describing table contents This is achieved by adding a ………..… element (with relevant text inside), just below the start tag. Try this now with one of the exercises you have already completed and look at the Live Preview.