Mastering XHTML/HTML Tables - Enhance Your Web Design Skills

TECH1001 Lecture 6 Electronic Publishing and Production 1 More About Tables

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

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

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

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

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.

<html> <head>   <title>TECH1001 Tables Explained -2 </title> </head> <body> <table> <tr> <th>Product</th> <th>Purpose</th> </tr> <tr> <td> Binder 1.0</td> <td> Join Multiple Objects</td> </tr> <tr> <td> Organizer 2.2</td> <td> Join multiple objects for easy access and changing</td> </tr> <tr> <td>Combiner 0.9</td> <td>Join multiple objects at the edges</td> </tr> <tr> <td> Splitter 3.2 </td> <td> Divide Single Object into Multiple small objects </td> </tr> </table> </body> table_ex2.html </html>

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.

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

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 border="2"> <table border="2" bordercolor="red"> table_ex4.html

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

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 threerows of our table. and the second cell is not going to be a spanned cell table_ex5.html <html> <head> <!– TECH1001 tables explained -5 -->  <title> Tables Explained -5 </title> </head> <body>

<table border="2"> <tr> <th>Type</th> <th>Product</th> <th>Purpose</th> <th>Industry Standard Terms</th> </tr> <tr> <td rowspan="3">Joining Tools</td> <td>Binder 1.0</td> <td>Join Multiple Objects at the edge </td> <td>Stapler</td> </tr> <tr> <td> Organizer 2.2</td> <td> Joint multiple objects for easy access and changing</td> <td>Ring Binder </td> </tr> <tr> <td>Combiner 0.9</td> <td>Join multiple objects at the edge</td> <td>Tape</td> </tr> <tr> <td>Dividing Tools</td> <td> Splitter 3.2 </td> <td> Divide Single Object into Multiple small objects </td> <td> Scissors</td> </tr> </table> </body> </html>

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 <html> <head>   <title> TECH1001 Tables Explained -6 </title> </head> <body>

<table border="2"> <tr> <th colspan="2">Merchandise</th> <th colspan="2">Descriptive Information</th> </tr> <tr> <th>Type</th> <th>Product</th> <th>Purpose</th> <th>Industry Standard Terms</th> </tr> <tr> <td rowspan="3">Joinin Tools</td> <td>Binder 1.0</td> <td>Join Multiple Objects at the edge </td> <td>Stapler</td> </tr> <tr> <td> Organizer 2.2</td> <td> Join multiple objects for easy access and changing.</td> <td>Ring Binder </td> </tr> <tr> <td>Combiner 0.9</td> <td>Join multiple objects at the edge</td> <td>Tape</td> </tr> <tr> <td>Dividing Tools</td> <td> Splitter 3.2 </td> <td> Divide Single Object into Multiple small objects </td> <td> Scissors</td> </tr> </table></body></html>

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

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

<html> </head> <body> <table border="2"> <caption> Office Product Merchandise and Category Information </caption> <tr> <th colspan="2">Merchandise</th> <th colspan="2">Descriptive Information</th> </tr> <tr> <th>Type</th> <th>Product</th> <th width="50%"> Purpose</th> <th width="15%">Industry Standard Terms</th> </tr> <tr> : : : </table> </body> </html>

Making the top two headings 50% each: <head>   <title>TECH1001 Tables Explained -9 </title> </head> <body> <table border="2"> <caption> Office Product Merchandise and Category Information </caption> <tr> <th colspan="2">Merchandise</th> <th colspan="2" width="50%" >Descriptive Information</th> </tr> <tr> <th>Type</th> <th>Product</th> <th> Purpose</th> <th>Industry Standard Terms</th> </tr> : : table_ex9.html : : </table>

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;}

The HTML file table_ex10.html <html > <head> <link rel="stylesheet" type="text/css" href="table.css" />   <title>TECH1001 Tables Explained -10</title> </head> <body> <table border="2"> <caption> Office Product Merchandise and Category Information </caption> <tr> <th colspan="2" class="highlight2" width="50%">Merchandise</th> <th colspan="2" class="highlight2" >Descriptive Information</th> </tr> <tr class="highlight3" > <th>Type</th> <th>Product</th> <th> Purpose</th> <th>Industry Standard Terms</th> </tr>

<tr> <td rowspan="3" class="highlight1">Joining Tools</td> <td>Binder 1.0</td> <td>Join Multiple Objects at the edge </td> <td>Stapler</td> </tr> <tr> <td> Organizer 2.2</td> <td> Join multiple objects for easy access and changing</td> <td>Ring Binder </td> </tr> <tr> <td>Combiner 0.9</td> <td>Join multiple objects at the edge</td> <td>Tape</td> </tr> <tr> <td>Dividing Tools</td> <td>Splitter 3.2</td> <td>Divide Single Object into Multiple small objects</td> <td>Scissors</td> </tr> </table> </body> </html>

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

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

Mastering XHTML/HTML Tables - Enhance Your Web Design Skills

Mastering XHTML/HTML Tables - Enhance Your Web Design Skills

Presentation Transcript

Lecture 6

LECTURE № 6

Lecture 6

Lecture 6

Lecture 6

Lecture 6

Lecture 6:

Lecture 6

Lecture 6

Lecture 6

LECTURE 6

TECH1001 Lecture 3

Lecture 6

LECTURE 6

Lecture 6

Lecture 6

Lecture 6

Lecture 6: