tables 23 rd february. what xhtml have we done so far? hyperlinks & anchors - xhtml supports 3...

TablesTables

23rd February

What XHTML have we done What XHTML have we done so far?so far? Hyperlinks & anchors - <a>

XHTML supports 3 types of lists: Ordered – <ol> + <li> Unordered – <ul> + <li> Definition – <dl> +<dt> + <dd>

Using images - <img>

Using image maps - <img>, <map>, <area>

TablesTables

Table structure and variables Table layout and design Using tables Table rendering and calculations Nesting tables Formatting via tables

TableTable

Tables are commonly used on Web pages in two ways:

To organise information

To format the layout of an entire Web page

TablesTables

A table is defined as a region that has rows and columns of small rectangles, called cells, that are arranged relative to each other in a certain way that makes up the table layout

Web pages that use tables are harder to code

Tables Structure & Tables Structure & VariablesVariables XHTML provide many variables that allow web

authors to control table structure

Table variables may be grouped into 2 categories: Non-cell variables Cell variables

Non Cell VariablesNon Cell Variables

Non cell variables control the properties and structure of the table, not the actual contents of the table:

caption is the title of the table summary provides a longer description border is the table’s outside border header is the first row of the table rows are the horizontal layout of the cells columns are the vertical layout of the cells width is a representation of the number of columns height is a representation of the number of rows

Non Cell VariablesNon Cell Variables

Heading 1 Heading 2 Heading 3

Cell(1,1) Cell(1,2) Cell(1,3)

Cell(2,1) Cell(2,2) Cell(2,3)

Cell(3,1) Cell(3,2) Cell(3,3)

Cell(4,1) Cell(4,2) Cell(4,3)

Cell(5,3)Cell(5,2)

Cell(7,1) Cell(7,2) Cell(7,3)

Cell(6,3)Cell(6,2)Cell(6,1)

Cell(5,1)

Width

Height

Border

Rows

Columns

Cell VariablesCell Variables

Cells are the basic units that make up the table

Cell variables control the properties and structure of individual cells: Row span Column span Padding Spacing Alignment

10

Cell Variable: colspanCell Variable: colspan

<table border="1"> <tr> <td colspan=“2”>

Birthday List</td></tr> <tr> <td>James</td> <td>11/08</td> </tr> <tr> <td>Karen</td> <td>4/17</td> </tr></table>

11

Cell Variable: rowspanCell Variable: rowspan

<table border="1">

<tr>

<td rowspan=“2>

<img src=“cake.gif” alt=“cake” height=“100” width=“100” /></td>

<td>James</td>

</tr>

<tr>

<td>11/08</td>

</tr>

</table>

Cell VariablesCell Variables

Cell spacing describes the amount of the horizontal and vertical spacing between cells

Specifying cell padding is equivalent to specifying top, bottom, left and right margins for the cell

Cell content can be aligned within each cell

13

Using TablesUsing Tables <table> tag

Contains the tableCommon attributes: border, width, align

<tr> tagContains a table row

<td> tagContains a table cell

<caption> tagAssigns a title to a table

14

Using TablesUsing Tables<table border="1"> <tr> <td>Name</td> <td>Birthday</td> </tr> <tr> <td>James</td> <td>11/08</td> </tr> <tr> <td>Karen</td> <td>4/17</td> </tr> <tr> <td>Sparky</td> <td>11/28</td> </tr></table>

4 rows

15

<table border="1"> <tr> <th>Name</th> <th>Birthday</th> </tr> <tr> <td>James</td> <td>11/08</td> </tr> <tr> <td>Karen</td> <td>4/17</td> </tr> <tr> <td>Sparky</td> <td>11/28</td> </tr></table>

Using the <th> Element

Using TablesUsing Tables

Using TablesUsing Tables

<<tabletable border= border=22 summary= summary="This is an example table""This is an example table" width= width="400""400" height= height="200">"200"> <<captioncaption align=align="center">"center">This is a Sample TableThis is a Sample Table</caption></caption> <<trtr align= align="center">"center"> <<thth>>1st Heading goes here1st Heading goes here</th></th> <<tdtd bgcolor= bgcolor="yellow">"yellow">Cell 1Cell 1</td></td> <td><td>Cell 2Cell 2</td></td> </tr></tr> <tr<tr align= align="center">"center"> <th><th>2nd Heading goes here2nd Heading goes here</th></th> <td<td bgcolor= bgcolor="yellow">"yellow">Cell 3Cell 3</td></td> <td><td>Cell 4Cell 4</td></td> </tr></tr> <tr<tr align= align="center">"center"> <th><th>2nd Heading goes here2nd Heading goes here</th></th>

<td<td bgcolor= bgcolor="yellow">"yellow">Cell 5Cell 5</td></td> <td><td>Cell 6Cell 6</td></td> </tr></tr> </table></table>

Using TablesUsing Tables

Cell 1Cell 1

Cell 3Cell 3

Cell 5Cell 5

Cell 2Cell 2

Cell 4Cell 4

Cell 5Cell 5

11stst heading goes here heading goes here

22ndnd heading goes here heading goes here

33rdrd heading goes here heading goes here

This is a Sample Table

Table Rendering & Table Rendering & CalculationsCalculations Every table, cell and its content must be

displayed properly in the browser

The following rules are used by browsers to render and calculate the size of tables Calculating table width and height (<table> + width,

height) Calculating the number of columns in a table Calculating the size of a table cell Calculating cell spacing and padding Inheritance of alignment specification

Nesting TablesNesting Tables

Table nesting is used to control formatting Code is quite complex A table is nested by having a table inside another

table Tables can be nested by using a <table> tag after

<td> Nesting tables may produce awkward results

Table cell sizes may vary greatly Location of empty cells may not be acceptable to web

authors

Using tablesUsing tables<table align="center" border="4" bgcolor="#FFFF00">

<tr><td>Cell 1</td><td>Nested Tables<table rows="2"

cols="3" align="center"><tr>

<td>T11</td>

<td>T22</td><td>T33</td>

</tr></table></td><td>Cell 3</td><td>Cell 4</td>

</tr><tr>

<td>Cell 5</td><td>Cell 6</td><td>Cell 7</td><td>Cell 8</td>

</tr><tr>

<td>Cell 9</td><td>Cell 10</td><td>Cell 11</td><td>Cell 12</td>

</tr></table>

Formatting a Web Page Formatting a Web Page via Tablesvia Tables Formatting web pages using tables has the

same idea as that of nesting tables

A web page layout is divided into regions

Then a table or a cell is substituted for each region

Even formatting web pages using tables can involve the use of nested tables

Formatting a Web Page Formatting a Web Page via Tablesvia Tables

23

Another Example …Another Example …

<table border="0" width="80%"> <tr> <td colspan="3">

<h2>This is the banner area</h2></td>

</tr> <tr> <td width="20%" valign="top">

Place Navigation here</td> <td width="10">&nbsp;</td> <td>Page content goes here</td> </tr></table>

24

Additional Table Additional Table LayoutsLayouts

Can you write the code for these 2 tables?

Accessibility and TablesAccessibility and Tables Use <th> elements to indicate column or row

headings.

Table element summary attribute provide an overview of the table contents

Table element title attribute provide a brief description of the table.

Associate <td> tags with corresponding <th> tags <th> tag id attribute <td> tag headers attribute

<table border="1" width="75%" title="Educational Background"

summary="This table lists my educational background including school attended, years, subject, and degree awarded (column headings). ">

<tr>

<th id="school">School Attended</th>

<th id="years">Years</th>

<th id="subject">Subject</th>

<th id="degree" >Degree Awarded</th>

</tr>

<tr>

<td headers="school">Schaumburg High School</td>

<td headers="years">2000 - 2005</td>

<td headers="subject">College Prep</td>

<td headers="degree">H.S. Diploma</td>

</tr>

</table>

What will this look like?What will this look like?

Conclusion Conclusion

Tables Tables Tables organise and structure web pages There are table-level and cell cell-level level variables The purpose of using a table determines its layout and

layout and design There are 5 important tags to use tables Table calculations and rendering is important because of

the number of different parameters involved Tables can be nested for better structure Table are extensively used for formatting web pages

Reference Reference

Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP Programmer's Reference, Hungry Minds Inc,U.S.

Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS, New Riders.

Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript