Open EditPlus and create a new file called table.htm containing the following code:-
Save the file and view it using the browser view. The resulting table should look something like this:-
In the code above, notice the use of indents to separate the various items. This is only done to make it easier for you to pick out the sections. The tag <table border> tells the browser to draw a border around each cell. The appearance of this border varies from browser to browser. Had the table started with a tag <table> then no lines would be shown.
In the code above, add the statement width=60% as shown below:-
The resulting table should now look something like this:-
It is also possible to control the width of individual columns as a percentage of the overall width of the table. Try this:-
The first column is forced to be 60% of the overall width of the table. As you have not imposed a width on columns 2 and 3 they share the remaining space equally. Notice how columns 2 and 3 have ‘word wrapped’ onto a second line automatically.
Notice also how the text in column 1 has aligned itself in the centre of the row vertically. This can be controlled by adding the code valign="top" or valign="bottom" into the <td… > tag. This must be done for each row separately. The horizontal alignment can be controlled in a similar way by inserting the codes align="center" or align="right" (note the American spelling of ‘center’)
Many tables require column heading to stand out from the rest of the data in the table. HTML has a short cut to do this, the tag <th> . This can be used in place of the <td> in the first row. This will make the text in that row bold type and centre aligned without the need for additional code to be inserted.
The color of text within a cell of a table can be controlled by inserting a colour statement after the <td… > tag such as <font color="#ff0000">.
Using all of the above techniques, try this code:-
Your original table should now have developed to look something like this:-
We will look at more advanced table options later in the course. To complete this activity add head and body statements to your code to give the page a title and make it match the colour scheme you set up in your first page.