HTML Lesson 7. Your assignment:

Transcription

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. You can put all kinds of data inside a (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 tag. Part 2: On the bottom of your page, make one table that: 1. has three columns and four rows. Inside each table 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 would include: <td><img src= monster.jpg </td>

2 Table The table tag looks like this: <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 tag. Table row An individual row that contains at least one data. On this page I've used two data s. The tag looks like this:. Table data An individual in a table row. The tag looks like this: <td></td>. The table, table row, and table data tags always nest like this: <table><td></td> Here is an example of a table with rows and s: <--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 s. You can make each row a different color, even the different s can be different colors. Align This tag helps you align your text in the table, row or. 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 s on all four sides of your. Cellspacing This sets the spacing between your table s. 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 rows row rows row 2 row row 3 Colspan The colspan tag makes the data stretch over two or more columns. Lissa Explains it All 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. <table border="1">

3 <td>cell 1</td> <table border="1"> <td>cell 1</td> <td>cell 3</td> <td>cell 4</td> How do I add a border to my tables? <table border="8"> <td>cell 1</td> <td>cell 3</td> <td>cell 4</td> How do I add color to my tables? <table border="8"> <td bgcolor="#00ccff">cell 1</td> <td bgcolor="#cc00ff">cell 2</td> <td bgcolor="#00ff00">cell 3</td> <td bgcolor="#ffff00">cell 4</td> How do I get rid of my border? Just add the tag border="0" to your table tag: <table border="0" spacing="0"> <td bgcolor="#00ccff">cell 1</td> <td bgcolor="#cc00ff">cell 2</td>

4 <td bgcolor="#00ff00">cell 3</td> <td bgcolor="#ffff00">cell 4</td> row 1 row 1 row 1 rows row 2 row rows row row 3 <table border="0" spacing="0"> <td bgcolor="#00ccff">row 1</td> <td bgcolor="#ffff00" rowspan=3>rows 1-3</td> <td bgcolor="#cc00ff">row 1</td> <td bgcolor="#00ff00">row 1</td> <td bgcolor="#00ff00">row 2</TD><td bgcolor="#00ff00" rowspan=2>rows 2-3</td> <td bgcolor="#00ccff">row 2</td> <td bgcolor="#ff33cc">row 3</td> <td bgcolor="#ff33cc">row 3</td> Lissa Explains it All <table border="0" spacing="0" padding="5"> <td bgcolor="#ffff00" colspan=4>lissa Explains it All</td> <td bgcolor="#00ccff"> 1</td> <td bgcolor="#cc00ff"> 2</td> <td bgcolor="#ff33cc"> 3</td> <td bgcolor="#00ff00"> 4</td> <td bgcolor="#ff33cc"> 5</td> <td bgcolor="#00ff00"> 6</td> <td bgcolor="#00ccff"> 7</td> <td bgcolor="#cc00ff"> 8</td> 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 <table border="0" padding="5" spacing="10" width="200"> <td bgcolor="#00ff00" width="50" >Cell 1</td> <td bgcolor="#ffff00" width="150" >Cell 2</td>