 |
|
|
 |
 
|
 Intermediate HTML Tutorial: Adding Rows and ColumnsHome > Build > Programming > HTML > Intermediate HTML Tutorial 2.3 Adding Rows and Columns Now let's try to add a row to the last example. To add another row we should just be able to add a <TR> </TR> tag and be done with it, right? Nope. We still have to define each cell individually, so we have to use three more <TD> tags. This is where people start having some difficulty with tables, so we'll break down the code even further: <TABLE WIDTH="100%" BORDER="1"> This is the table definition. All this says is that our table will span the entire screen and has a border of 1. In order to complete the table, we must add and format the rows and cells. <TR> This turns on the first row. <TD ALIGN="center" VALIGN="top" HEIGHT="123"> This defines the first cell of the table. This tag says that the text or graphics will be center aligned, vertically aligned on the top, and the entire cell has a height of 123 (pixels). If we closed the table here (with </TR> and </TABLE> we would have a one cell table. <img src="../../../../blueback/bye.gif" width="200" height="36"> This is the contents of the first cell, an image. </TD> This closes the first cell. <TD ALIGN="left" VALIGN="bottom" HEIGHT="123"> This opens a new cell and defines it. As of now, we have 2 columns. The data inside this cell will be aligned to the left and to the bottom. <img src="../../../../blueback/gallery.jpg" width="75" height="40"> This is the contents of the second cell, or the second column of the first row. </TD> This closes the second cell, or second column of the first row. <TD ALIGN="right" HEIGHT="123"> This opens a new cell and defines it. As of now, we have 3 columns. The data inside this cell is aligned to the right and the middle. We know it will be aligned to the middle because middle is the default vertical alignment. <img src="../../../../graphics/amazonhome.gif" width="90" height="68"> This is the contents of the third cell, or the third column of the first row. </TD> This closes the third cell, or the third column of the first row. </TR> This closes the first row. If we closed the table now, we would have the same table displayed in the last sample. Only now we want to add a blank row. First we must add a new row tag. <TR> This opens the second row. <TD> This opens the first cell or column of the second row. We don't need to define it since it will be blank. This is the HTML equivalent of a space. This is necessary only when the cell has a color or a background image. It stands for non-breaking space. </TD> This closes the first cell of the second row. <TD> This opens the second cell of the second row. Spacer. </TD> This closes the second cell of the second row. <TD> This opens the third cell of the second row.   Spacer. </TD> This closes the third cell of the second row. </TABLE> This closes the table. Here is the code together: <TABLE WIDTH="100%" BORDER="1"> Now how about if we wanted to add a column to that table? If the last part made sense, this will be even easier. To add a column, we just have to add an extra <TD> cell inside each <TR> row. We'll put one just after the 'Bye' graphic: <TABLE WIDTH="100%" BORDER="1"> This is where we inserted the column <TD ALIGN="left" VALIGN="bottom"
HEIGHT="123"> This is where we inserted the column in the second row. Remember in order to add a column, a <TD> tag has to be added inside every <TR> tag. <TD> There's an extra column there. That wasn't too difficult now, was it? |
|||||||||||||||||||
|
