1 / 24

TECH1001 Lecture 6

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

ruizc
Download Presentation

TECH1001 Lecture 6

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

  5. Example -1 This table has a heading row with two cells, three rows for information each row containing two cells of data <html> <head> <!-- tables explained -1 --> <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>

  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. <html> <head> <!-- tables explained -2 --> <!-- introducing a new row to the table --> <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>

  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. <html> !-- tables explained -3 --> <!-- adding a column --> <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>

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

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

  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 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 --> <!-- spanning Rows --> <title> Tables Explained -5 </title> </head> <body>

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

  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 <html> <head> <!-- tables explained -6 --> <!-- Spanning Column --> <title> TECH1001 Tables Explained -6 </title> </head> <body>

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

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

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

  19. Making the top two headings 50% each: <head> <!-- tables explained -9 --> <!-- specifying Cell Alignment specifying 50% each for top row elements--> <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>

  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.html <html > <head> <link rel="stylesheet" type="text/css" href="table.css" /> <!-- tables explained -10 --> <!-- linking with a style sheet--> <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>

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

  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

More Related