html 58.51a tables!. why tables? n complete control of you web page layout. n basically, you can...

15
HTML 58.51A Tables!

Upload: thomas-day

Post on 01-Jan-2016

213 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: HTML 58.51A Tables!. Why Tables? n Complete control of you web page layout. n Basically, you can place the content you want, where you want it, with little

HTML 58.51ATables!

Page 2: HTML 58.51A Tables!. Why Tables? n Complete control of you web page layout. n Basically, you can place the content you want, where you want it, with little

Why Tables?

Complete control of you web page layout.

Basically, you can place the content you want, where you want it, with little restrictions.

Page 3: HTML 58.51A Tables!. Why Tables? n Complete control of you web page layout. n Basically, you can place the content you want, where you want it, with little

The Table tags

<table> </table> <tr> </tr> <td> </td> <th> </th> The Nested order:The Nested order: <table><tr> <td></td> </tr></table>

Page 4: HTML 58.51A Tables!. Why Tables? n Complete control of you web page layout. n Basically, you can place the content you want, where you want it, with little

Table <table> Attributes width= “value” Can be percentage or pixels.

align=”value” Can be center, right or left (default)

bgcolor=”value” Hex color or stated color

Page 5: HTML 58.51A Tables!. Why Tables? n Complete control of you web page layout. n Basically, you can place the content you want, where you want it, with little

Table Attributes(cont.) border=”value” pixels only Start with border=“1”, to design

and setup table, then make it border=“0”.

bordercolor=”value" bordercolorlight=”value" bordercolordark=”value”

Page 6: HTML 58.51A Tables!. Why Tables? n Complete control of you web page layout. n Basically, you can place the content you want, where you want it, with little

Table Attributes(cont.) background=”value” Can use .gif or .jpg cellspacing=”value” - this is the

space (in pixels) between cells. Default = 1

cellpadding=”value” - this is the space (in pixels) between the edge of a cell and the text/image.

Default = 1

Page 7: HTML 58.51A Tables!. Why Tables? n Complete control of you web page layout. n Basically, you can place the content you want, where you want it, with little

Table Row <tr> Attributes align=”value” center, right, & left (default)

valign=”value” Top, bottom, Middle (default)

Page 8: HTML 58.51A Tables!. Why Tables? n Complete control of you web page layout. n Basically, you can place the content you want, where you want it, with little

Table Row <tr> Attributes bgcolor=”value” Hex color or stated color

bordercolor=”value" bordercolorlight=”value" bordercolordark=”value”

Page 9: HTML 58.51A Tables!. Why Tables? n Complete control of you web page layout. n Basically, you can place the content you want, where you want it, with little

<td> or <th> Attributes width= “value” Can be percentage or pixels.

height = “value” Can only be in pixels.

Page 10: HTML 58.51A Tables!. Why Tables? n Complete control of you web page layout. n Basically, you can place the content you want, where you want it, with little

<td> or <th> Attributes align=”value” center, right, & left (default)

valign=”value” Top, bottom, Middle (default)

Page 11: HTML 58.51A Tables!. Why Tables? n Complete control of you web page layout. n Basically, you can place the content you want, where you want it, with little

<td> or <th> Attributes background=”value” Can use .gif or .jpg

bgcolor=”value” Hex color or stated color

Page 12: HTML 58.51A Tables!. Why Tables? n Complete control of you web page layout. n Basically, you can place the content you want, where you want it, with little

What about that space? What about that 10 to 20 pixel

space in the top and left side of the web page.

In the body tag <body> use: leftmargin=“0” topmargin=“0”

Page 13: HTML 58.51A Tables!. Why Tables? n Complete control of you web page layout. n Basically, you can place the content you want, where you want it, with little

Table inside of a table? Yes! Just make sure you nest them properly: <table>

<tr> <td>

• <table>– <tr><td></td></tr>

• </table> </td>

</tr> </table>

Page 14: HTML 58.51A Tables!. Why Tables? n Complete control of you web page layout. n Basically, you can place the content you want, where you want it, with little

Good Table use... Creating space for the side bars. You can create space many

different ways in all areas of a table.

Try using a one pixel .gif, and change the size attributes.

Page 15: HTML 58.51A Tables!. Why Tables? n Complete control of you web page layout. n Basically, you can place the content you want, where you want it, with little

Post your URL including the following elements added to your Web site: Add 2 tables 30 points 5 attributes including a colspan 10 points 2 images in table 10 points 2 links in table 10 points