|
Ok, lets open up our template and get to work. If you haven't made your template yet, go back
and do the Creating a Web Page Template section. Or you can copy the template from the
link on the template page
- First lets insert a blank line after text This is the body of my web page, and use the div tag to center our table on the
screen. Type in
<div name="table" align="center">.
We can use the div tag to break our page into sections. the name="table" attribute is not important for our use, but when we get more
advanced we can use the name attribute to identify our divisions. Insert a new line by pressing Enter.
- Our first step to start the table is typing
<table border="1" width="95%">.
this will create our table with a border of size = 1. If you set the border = 0, it will have no visible border. Also the
width parameter will make the width of our table 95% of the size of the window.
- Now we will identify the first row in our table by typing
<tr>, which translates to, oddly enough, table row. Insert a new line
by pressing Enter.
- Ok we have told the browser that we are starting a table and that we are defining the first row in our table. But what are we going to put in our table? We have
two choices, the first is table header, which when defined automatically centers and bolds the data that we put in the cell. The second is table data
which uses left aligned, normal text. Lets make the first row of our table a header by typing
<th colspan="2">. The
colspan attribute tells the browser that this table header cell will span 2 columns of our table. Let's put some text into our header, type This is the
table header, and close up our cell by typing </th>. Press Enter to insert a new line.
- Thats it for the first row of the table, so we can close it up by typing
</tr>. Press Enter to insert a line break, and
type <tr> to start the next table row. Press Enter for a line break.
- Type
<td width="50%"> to start a data cell. We use the attribute width="50%" to ensure that the text we put in our
cell will word-wrap. If we do not specify a width for the cell, the cell will expand to fit the longest line of text. Type This is Row 2 Cell 1 and close up
the cell by typing </td> and press Enter.
- Type
<td width="50%"> to start the next data cell. Type This is Row 2 Cell 2 and close up the cell by typing
</td>. Press Enter to go to the next line.
- Lets finish up our table by first closing the row,
</tr> and then closing our table by typing </table>,
And finally close the div by typing </div>.
Does your text file look like the sample below?
When you go to save the file this time, select Save as from the File menu and name the file wptable.html. Be sure to save as an HTML file.
click here to see what our page looks like in the browser now.
Take some time to play with your table. Make changes to your table and view the changes in your
web browser. Remember to save each time to ensure the changes are in effect. To view the page in your browser, either double click
the files icon, or click File and then Open on your browser, and select your file.
- Try adding another row or two.
- Add more text to your table header and table data cells to see the word wrapping effect.
- With longer text selections, change the width="50%" to another number or delete it entirely.
- Remove the colspan from the table header and view the results. There is also an attribute called rowspan
which allows a cell to span vertically rather than horizontally, apply the rowspan attribute to one of the table
data cells after deleting the colspan from the table header cell.
- In one of the table data cells type
height="300", see how
the table grew vertically? Also notice the text is in the middle of the cell. after the height attribute
type valign="top" to vertically align the text at the top of
the cell (other possibilities are bottom & middle)
- Like the valign attribute, try using
align="right" or "center".
|
