1 TECH1001 Lecture 6 Electronic Publishing and Production 1 More About Tables

2 This lecture introduces XHTML/HTML tables which are grids made up of rows and columns. The lecture will cover: Creating basic tables Adding deleting rows, columns Spanning columns and rows Adding borders Linking tables with style sheets and adding colour to table elements

3 Tables are useful to: Present complex information in a more readable format To improve presentation/ page layout of a HTML document Basic Table elements table - a table within an XHTML document tr – a row within a table td – a cell within a row th – a heading cell within a row

4 Introduction to layout start and end tag of the table all table elements will be between these tags Table with an empty row Table with a single row and two cells within the row Binder 1.0 Join Multiple Objects table_ex0.html

5 Example -1 This table has a heading row with two cells, three rows for information each row containing two cells of data TECH1001 Tables Explained -1 Product Purpose Binder 1.0 Join Multiple Objects Organizer 2.2 Join multiple objects for easy access and changing Splitter 3.2 Divide Single Object into Multiple small objects table_ex1.html

6 Notice that the content is present, but the table does not include any formatting or borders Also notice the content inside 'th' tags are centred Adding a new row To add a new row insert, additional 'tr' and 'td' elements where you want the new data to appear.

7 TECH1001 Tables Explained -2 Product Purpose Binder 1.0 Join Multiple Objects Organizer 2.2 Join multiple objects for easy access and changing Combiner 0.9 Join multiple objects at the edges Splitter 3.2 Divide Single Object into Multiple small objects table_ex2.html

8 Adding a column Adding a column is some what more difficult than adding a row because you have to add a cell to each row. However, the general process is the same: You insert elements where you want them to appear either to the left or to the right of existing columns.

9 !-- tables explained -3 --> TECH1001 Tables Explained -3 Product Purpose Industry Standard Terms Binder 1.0 Join Multiple Objects Stapler Organizer 2.2 Join multiple objects for easy access and changing. Ring Binder Combiner 0.9 Join multiple objects at the edge Tape Splitter 3.2 Divide Single Object into Multiple small objects Scissors table_ex3.html

10 Table borders borders are lines that enclose tables and separate rows, columns and cells This is done by adding a border attribute to the opening table tag table_ex4.html

11 Spanning rows and Columns Spanning refers to stretching a cell over multiple rows or columns Span Attributes: AttributeUse rowspan="n"how many rows the cell should span' colspan="n"how many columns the cell should span

12 In the following example we are going to add another column to our table, The first cell of this new column will span the first three rows of our table. and the second cell is not going to be a spanned cell table_ex5.html Tables Explained -5

13 Type Product Purpose Industry Standard Terms Joining Tools Binder 1.0 Join Multiple Objects at the edge Stapler Organizer 2.2 Joint multiple objects for easy access and changing Ring Binder Combiner 0.9 Join multiple objects at the edge Tape Dividing Tools Splitter 3.2 Divide Single Object into Multiple small objects Scissors

14 Spanning Columns: You can span a column using either 'th' or 'td' element depending whether you are spanning table heading cells or table information cells The following example shows how to add two th cells – one with the word Merchandise and one with the phrase Descriptive Information will be added to our table These two new cells will each span two columns of our table table_ex6.html TECH1001 Tables Explained -6

15 Merchandise Descriptive Information Type Product Purpose Industry Standard Terms Joinin Tools Binder 1.0 Join Multiple Objects at the edge Stapler Organizer 2.2 Join multiple objects for easy access and changing. Ring Binder Combiner 0.9 Join multiple objects at the edge Tape Dividing Tools Splitter 3.2 Divide Single Object into Multiple small objects Scissors

16 Adding A Caption: A caption is a descriptive text that usually appears above the table Office Product Merchandise and Category Information : ……….rest of the table : table_ex7.html

17 Use of Cell Width to Format Columns: Cell width can be used to specify what percentage of a table is occupied by a specific column width="n%" to the 'th' or 'td' element, where n % means % of the table occupied by the specified column For Example if we want 'Purpose' hedder column to occupy 50% of the table and the 'Industry Standard Terms' to occupy' 15% of the table table_ex7.html table_ex8.html

18 Office Product Merchandise and Category Information Merchandise Descriptive Information Type Product Purpose Industry Standard Terms :

19 Making the top two headings 50% each: TECH1001 Tables Explained -9 Office Product Merchandise and Category Information Merchandise Descriptive Information Type Product Purpose Industry Standard Terms : : table_ex9.htmltable_ex9.html :

20 Linking with Style sheets by linking a style sheet to our table we can change specific cell properties, such as; font colour cell colour font style font size etc. table_ex10.html external css file 'table.css' body{font-family: Helvetica, Verdana, sans-serif; color: green;} td.highlight1 {background-color: yellow; color:red;} th.highlight2 {background-color: pink;} tr.highlight3 {background-color: gray; color:red;}

21 The HTML file table_ex10.htmltable_ex10.html TECH1001 Tables Explained -10 Office Product Merchandise and Category Information <th colspan="2" class="highlight2" width="50%">Merchandise <th colspan="2" class="highlight2" >Descriptive Information Type Product Purpose Industry Standard Terms

22 Joining Tools Binder 1.0 Join Multiple Objects at the edge Stapler Organizer 2.2 Join multiple objects for easy access and changing Ring Binder Combiner 0.9 Join multiple objects at the edge Tape Dividing Tools Splitter 3.2 Divide Single Object into Multiple small objects Scissors

23 Why use CSS with tables: It helps to separate the content from style tags such as 'font color' etc. Helps to easily change style issues of a table, or set of tables by changing a single CSS file conforms with W3C web standards

24 What have we learnt? How to create a table How to change row and column formats Use of style sheets with tables