HTML Lesson 7. Your assignment:

(1)

HTML Lesson 7

Tables are one of the biggest tools Web developers use to present data

wherever they want data to go on the page. Like spreadsheets, rows go

across (left to right) and columns go up and down. Each box is called a cell.

You can put all kinds of data inside a cell (text images, movies, etc.)

Your assignment:

Part 1: Use the attached tutorial to make a NEW Web page that has eight

different tables. But don’t freak out: the source code for each table is

given to you! The important thing for you to do is to figure out what each

html tag does and how that tag changes the table. That will become obvious

to you as you go along.

Separate each table by using the <br> tag.

Part 2:

On the bottom of your page, make one table that:

1. has three columns and four rows. Inside each table cell just put

a name of a friend, pet, teacher or family member.

2. make one table with one row and two columns. Inside each

column put a small picture inside. The source code for inserting

an image inside a table cell would include:

(2)

 Table The table tag looks like this: <table></table>. All of your table information goes between these two tags to make up a table. All tables start with the <table> tag and end with the </table> tag.

 Table row An individual row that contains at least one data cell. On this page I've used two data cells. The tag looks like this: <tr></tr>.

 Table data An individual cell in a table row. The tag looks like this:

<td></td>. The table, table row, and table data tags always nest like this: <table><tr><td></td></tr></table>

 Here is an example of a table with rows and cells: cell

cell

<--This is a row

 Border Adding this to your table tag lets you specify whether or not your table has borders. The table I've used for my page has no borders.

 Bgcolor You can add this tag to change the background color of your table, row, or table cells. You can make each row a different color, even the different cells can be different colors.

 Align This tag helps you align your text in the table, row or cell. If you don't add it, your image or text will be aligned to the left (it's the default). You can specify center or left to change the alignment.

 Valign This tag aligns your table vertically. If you don't change it to "top" or "bottom" your information in your table will be aligned vertically in the center.  Cellpadding This sets the margins inside of your table cells on all four sides

of your cell.

 Cellspacing This sets the spacing between your table cells.

 Rowspan Adding this creates a column that spans your rows vertically, it can span all or some of your rows.

row 1 row 1 row 1

row 2 row 2

row 3 rows

1-3 rows

2-3 row 3

 Colspan The colspan tag makes the data cell stretch over two or more columns.

Lissa Explains it All cell 1 cell 2 cell 3 cell 4 cell 5 cell 6 cell 7 cell 8

Put These Tables in a New Web Page:

How do I make a basic table? Here are some examples of simple tables.

Different browsers don't show tables the same way, even if you use the same codes. Cell 1 Cell 2 <table border="1">

(3)

<td>Cell 1</td> <td>Cell 2</td> </tr> </table> <br> Cell 1 Cell 2 Cell 3 Cell 4 <table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> <br>How do I add a border to my tables?

Cell 1 Cell 2 Cell 3 Cell 4 <table border="8"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> <br>How do I add color to my tables?

Cell 1 Cell 2 Cell 3 Cell 4 <table border="8"> <tr> <td bgcolor="#00CCFF">Cell 1</td> <td bgcolor="#CC00FF">Cell 2</td> </tr> <tr> <td bgcolor="#00FF00">Cell 3</td> <td bgcolor="#FFFF00">Cell 4</td> </tr> </table>

<br>How do I get rid of my border? Just add the tag border="0" to your table tag:

Cell 1 Cell 2 Cell 3 Cell 4

(4)

</table> <br>

row 1 row 1 row 1

row 2 row 2

row 3 rows

1-3 rows 2-3 row 3

Lissa Explains it All cell 1 cell 2 cell 3 cell 4 cell 5 cell 6 cell 7 cell 8

<table border="0" cellspacing="0" cellpadding="5"> <tr> <td bgcolor="#FFFF00" colspan=4>Lissa Explains it All</td> </tr> <tr> <td bgcolor="#00CCFF">cell 1</td> <td bgcolor="#CC00FF">cell 2</td> <td bgcolor="#ff33cc">cell 3</td> <td bgcolor="#00FF00">cell 4</td> </tr> <tr> <td bgcolor="#ff33cc">cell 5</td> <td bgcolor="#00FF00">cell 6</td> <td bgcolor="#00CCFF">cell 7</td> <td bgcolor="#CC00FF">cell 8</td> </tr> </table>

<br>How do I set widths for my table? Just add the width tag with specific widths to your table tag. You can also specify percentages in the tag, for instance <width=30%>. Just make sure the widths and percentages add up to 100%.

(5)

Cell

1 Cell 2

</tr> </table>