Adding Rows to your table

Lesson 6

 

Here is the code that we left off with in the last lesson.

<table align=center border=1 width=90% background=html/backgroundlight.jpg>

<tr>
<td width=33%><br></td>

<td width=33%><br></td>

<td width=34%><br></td>
</tr>
</table>

I now have three <td> lines and the widths all add up to 100. Here what it looks like

     

Lets add another Table Row <tr>.

Copy the area shown in red below.

<table align=center border=1 width=90% background=html/backgroundlight.jpg>

<tr>
<td width=33%><br></td>

<td width=33%><br></td>

<td width=34%><br></td>
</tr>

</table>

Now make a space under your closing <tr> tag and paste what you have copied.

<table align=center border=1 width=90% background=html/backgroundlight.jpg>

<tr>
<td width=33%><br></td>

<td width=33%><br></td>

<td width=34%><br></td>
</tr>

<tr>
<td width=33%><br></td>

<td width=33%><br></td>

<td width=34%><br></td>
</tr>

</table>

Now you have added a new row that looks the same as the first row.

     
     

I am going to replace the <br> in the code so that you can see where each of the cells is located in in the code in relation to where it is displayed

Here is the code

<table align="center" border="1" width="90%" background="backgroundlight.jpg">
<tr>
<td width="33%">1</td>
<td width="33%">2</td>
<td width="34%">3</td>
</tr>
<tr>
<td width="33%">4</td>
<td width="33%">5</td>
<td width="34%">6</td>
</tr>

</table>
 

1 2 3
4 5 6

Now I will add an align=center statement to each of the <td> tags.

<table align=center border=1 width=90% background=html/backgroundlight.jpg>
<tr>
<td align=center width=33%>1</td>
<td align=center width=33%>2</td>
<td align=center width=34%>3</td>
</tr>
<tr>
<td align=center width=33%>4</td>
<td align=center width=33%>5</td>
<td align=center width=34%>6</td>
</tr>

</table>
 

1 2 3
4 5 6

ok lets add one more row. This is FUN

<table align=center border=1 width=90% background=html/backgroundlight.jpg>
<tr>
<td align=center width=33%>1</td>
<td align=center width=33%>2</td>
<td align=center width=34%>3</td>
</tr>
<tr>
<td align=center width=33%>4</td>
<td align=center width=33%>5</td>
<td align=center width=34%>6</td>
</tr>
<tr>
<td align=center width=33%>7</td>
<td align=center width=33%>8</td>
<td align=center width=34%>9</td>
</tr>
</table>

1 2 3
4 5 6
7 8 9

If your table looks like this, do the whirl around the room twice and go to the next lesson.