eca 228 internet/intranet design i tables. eca 228 internet/intranet design i basic html tables...

ECA 228 Internet/Intranet Design I

Tables


Basic HTML Tables

Created as a way to present rows and clumns of data


Basic HTML Tables cont …

HTML does not explicitly create columns, only rows

Date 8AM 2PM 8PM

1 September $1.37 $1.37 $1.37

13 September $1.51 $1.63 $1.67

31 September $1.60 $1.69 $1.69

price of gasoline throughout the day


Table Markup

The following tags have corresponding closing tags which must be closed

– <table> opens an HTML table

– <tr> begins a table row

– <td> creates a table cell

– <th> optional header cell tag – cell markup is centered and bold

Table Markup

<table><tr> 

<td> Date </td> <td> 8AM </td> <td> 2PM </td> <td> 8PM </td>

</tr></table>


Horizontal Sections

To designate horizontal sections of a table:– <thead> </thead>– <tbody> </tbody>

implicitly created in HTML file explicit <tbody> required in XML file

– <tfoot> </tfoot>

Use css to apply style to different sections of table


<table> attributes

border = “number”

cellpadding = “number”the space between the content of the cell and the border

default value is 1

< table border=“1” >

< table border=“1” cellpadding=“5” >


<table> attributes cont …

cellspacing = “number”

the space between table cells

default value is 2

< table border=“1” cellpadding=“5” cellspacing=“5” >



align = “left | right | center”

aligns the table in relation to the page

default value is left

< table border=“1” align=“center” >



bgcolor = “color | hexadecimal value”

sets background color of table

default value is transparent

not fully supported by Netscape 4+

< table border=“1” bgcolor=“#c0c0c0” >



background = “imageName.gif”

inserts background image

no default value

not fully supported by Netscape 4+

< table border=“1” background=“image/myImage.gif” >



bordercolor = “color | hexadecimal value”

sets border color of table

default value is black

not supported by Netscape 4+

< table border=“1” bordercolor=“red” >



width = “number | %”

sets width of table

< table border=“1” width=“50%” >



height = “number”

sets height of table

no default value

not part of W3C recommendations

< table border=“1” height=“300” >



frame example

Date 8AM 2PM 8PM

1 September $1.37 $1.37 $1.37

13 September $1.51 $1.63 $1.67

31 September $1.60 $1.69 $1.69


< table border=“1” frame=“hsides” >



rules = “none | rows | cols | groups | all”

sets internal borders inside table

default value is all

not fully supported – you may not get the results you expect

< table border=“1” rules=“rows” >



rules example

Date 8AM 2PM 8PM

1 September $1.37 $1.37 $1.37

13 September

$1.51 $1.63 $1.67

31 September

$1.60 $1.69 $1.69


< table border=“1” rules=“cols” >


<tr> attributes


sets background color of row


< table border=“1”>

<tr bgcolor=‘red’>


<tr> attributes cont …

align = “left | center | right”

aligns content in relation to the table cell



<tr align=“center”>



valign = “top | middle | bottom”

aligns content vertically in relation to the cell

default value is middle


<tr valign=“right”>



id = “name_of_id”

class = “name_of_class”

apply a stylesheet class or id to row


<tr class=“red_border”>


<td> attributes


sets background color of table cell



<tr>

<td bgcolor=‘red’>


<td> attributes cont …

align = “left | center | right”

aligns content in relation to the table cell



<tr>

<td align=‘center’>



valign = “top | middle | bottom”

aligns content vertically in relation to the cell

default value is middle


<tr>

<td valign = ‘top’>



id = “name_of_id”

class = “name_of_class”

apply a stylesheet class or id to cell


<tr>

<td class=‘red_border’>



colspan = “number of columns to span”

merge columns


<tr>

<td colspan=‘2’>



colspan

< table border=“1”><tr>

<td colspan=‘2’> blah </td></tr>

<tr><td> blah </td><td> blah </td>

</tr></table>

blah

blah blah



rowspan = “number of rows to span”

merge rows


<tr>

<td rowspan=‘2’>



rowspan

< table border=“1”><tr>

<td rowspan=‘2’> blah </td>

<td> blah </td></tr>

<tr><td> blah </td>

</tr></table>

blah

blah

blah


<colgroup>

explicitly create groups of columns may use closing</colgroup> tag attributes include

– span– width– id– class– align– valign


<colgroup> cont …

< table border=“1”><colgroup bgcolor=‘pink’ /><colgroup bgcolor=‘yellow’ />

<tr><td> blah </td><td> blah </td>

</tr> <tr><td> blah </td><td> blah </td>

</tr></table>

blah blah

blah blah


<col>

further divide <colgroups> does not use closing</col> tag attributes include

– span– width– id– class– align– valign


<col> cont …

< table border=“1”><colgroup bgcolor=‘pink’ span=‘2’> <col valign=‘top’ /> <col valign=‘bottom’ /></colgroup><colgroup bgcolor=‘yellow’ /><tr> <td>blah</td><td>blah</td> <td>blah</td></tr> <tr> <td>blah</td><td>blah</td> <td>blah</td> </tr></table>

blah

blah

blah

blah

blah

blah

eca 228 internet/intranet design i tables. eca 228 internet/intranet design i basic html tables...

Documents