1 / 18

Web Design (9)

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

lkoch
Download Presentation

Web Design (9)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design (9) Tables

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

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

  4. 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> </table> <tr> </tr> table row <th> </th> table header cell <td> </td> table data cell

  5. A Simple Table Example: A small table, with 3 rows and 3 columns, that lists nutritional information. Menu Item Calories Fat (g) Chicken Noodle Soup 120 2 Caesar Salad 400 26

  6. Nutritional Data Exercise <table> <tr> <th>MenuItem</th> <th>Calories </th> <th>Fat(g) </th> </tr> <tr> <td>ChickenNoodle Soup</td> <td>120 </td> <td>2</td> </tr> <tr> <td>Caesarsalad</td> <td>400 </td> <td>26</td> </tr> </table>

  7. Notes on HTML Tables • The <tr> element can only contain <td> and <th> elements. (2) The number of rows is defined by the number of <tr> elements, whereas the number of columns is defined by the number of <td> and <th> elements. (3) Within the <table> element, information can only be contained within a <td> or <th> element.

  8. Bringing some shape to your table Returning to your ‘nutritonal information’ table, add the following attributes to the opening table tag: <tablewidth=“900”border=“1”align=“center”cellpadding=“4”cellspacing=“1”> Save, Validate, Live Preview. What do you notice? Now, change the attribute values and note how things change!

  9. Exercise – Beatles Albums Create the code for an HTML Table using the following information: Album Year Rubber Soul 1965 Revolver 1966 Sgt. Pepper 1967 White Album 1968 Abbey Road 1969

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

  11. Exercise – Colspan (1) <tablewidth=“ ” border=“” align=“” cellpadding=“ ” cellspacing=“”> <tr> <thcolspan=“2”>Fat</th> </tr> <tr> <td>Saturated Fat (g)</td> <td>UnsaturatedFat (g)</td> </tr> </table>

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

  13. TV Programmes Table (using colspan) Create the code for a HTML Table using the following TV Programme information: Start times: 7:00 7:30 8:00 BBC1 One ShowCountry File ITV1 Cricket HighlightsEmmerdale 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)

  14. 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:

  15. Exercise: Rowspan (1) <table width=“” border=“” align=“” cellpadding=“ ” cellspacing=“”> <tr> <th rowspan=“3”>Serving Size </th> <td>Small(200g)</td> </tr> <tr> <td>Medium(400g)</td> </tr> <tr> <td>Large(600g)</td> </tr> <table>

  16. Exercise: Rowspan (2) What do you notice about the table header <th> 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 <td> cells.

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

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

More Related