TABLES IN HTML No, not that kind of table!! THIS KIND!!

Tables n Why use tables on a web page? –Easier to align data, even with a border of 0 –Organized and neat –Easy to read

To add a table n To do a table, you must have a beginning and ending table tag n

For example:

Table Borders n Add border=“n” if you wish to include a border around your table and its cells. n Even if you don’t want a border, you should still include the border tab at 0. Instead of use n Wait until you master tables before trying one without a border

Table Rows n Each row has a beginning and ending tag n

Cells / Columns n To make another column you create a separate cell with the tag (ending tag also ) <table border=“3” column 1 column 2 column 3

Heading Cells n If you want your columns to have labels or column headings, use the table heading tags n These will center and bold your headings in the middle of your columns Heading 1> Heading 2 Heading 3 U:\Lburgess\my web pages\my favorites.html

Changing Text Alignment in a Cell n You can change the text alignment to left, center or right. n And, you can change the text alignment to top, middle or bottom of the cell. n To do so, you add an alignment tag to your column tag n

What if you want links inside your table? n To create a table that looks like this one n And links to those web pages CBS Home PageWPHS Home Page n The tags would be as follows CBS Home Page  What would the WPHS Tag look like?

Let’s Review n To add a border to your table – n To create a table without a border – n To center text within a cell of a table – n To add space between the cell wall and the text –<table border=“1” cellpadding=“#” n To add space between cells –

Let’s Review n To create a heading for your columns – replaced on first row n To vertically align the the text in cells use valign – n To add a hyperlink inside the table as text – –Don’t forget to type in what text you want to show after that link reference Where you want to go to

Your Turn

Changing Row Span or Column Span n You can span more than one row or more than one column n <rowspan=“2” n <colspan=“2”

Designing a Table n You should absolutely draw your table on paper first to see what you want it to look like before creating your html document. n Once you draw your table on paper, then you will be able to see what type of tags you will need.