HTML table alterations

HTML table alterations:

In this tutorial we will be expanding on our previous tutorial by creating multiple tables to store all of our future HTML tutorial data.

If you want to follow the tutorial please download tutorial template here
If you are following these tutorials continue to use your own source code from previous tutorial.


Change cell widths:
Inside the first table date tag type in width="110". This will set the column width to 110px and it will allocate the rest of the 620 table width to the other column in the table.
Repeat this step for the Clickable Button, Onclick Event Button and URL Link Button sections.
Note: A table with more than two columns will allocate the excess width to the rest of the columns in said table.

For the text link with target attribute table change the width to 600 for the first table data tag.

<h4>Text link:</h4> This is a preview of what is produced from the Text link tutorial <table width="620" border="1"><tr> <td width="110">HTML Code</td><td></td> </tr> <tr> <td>Link Produced</td><td></td> </tr> </tbody></table>

Change table headings text:
What we are going to do here is change the text that has been input into a cell. The text will change to bold text and be centered within the cell. Inside the first table date tag replace td with th and repeat this step for the next column as well.

<table width="800" border="2"> <tr> <th width="600">HTML code</th> <th>Link Produced</th> </tr>

Change table border and background colours:
What we are going to do here is change the table border colour and alter the cell borders also. By default a table with a border thickness will have a black border outline. To alter the border colour you use the "bordercolor" attribute within the table opening tag. The border colour can be altered by putting in the text value of the colour ie "BLUE", or by using HEX values like "#0000FF". There are other input values for colour but we will be using the HEX value for this tutorial.

Inside the open table tag type in bordercolor="#0000FF" to change the border colour to blue. To change the background colour type in bgcolor="#CCCCCC" which looks like a teal colour.

<table width="800" border="2" bordercolor="#0000FF" bgcolor="#CCCCCC"> <tr> <th width="600">HTML code</th> <th>Link Produced</th> </tr> rest of the code goes here..... </table>

Feel free to pick a choose colours for the border and background. For a cool colour picker which I found on the W3schools website click here

Save your HTML document and test on browser of choice. If you wish to continue following the tutorials type Yes into the table data column after Table Alterations in the completed tutorials table.

<tr>    <td>Table Alterations</td>    <td>Yes</td> </tr>

To download the finished example for this tutorial please click here

In the next tutorial I will be talking about hyperlinks.

Previous tutorial

Next tutorial