HTML Tables.

Today I was given an introduction to my assignment for the Web Design Module, which is to build a simple portfolio or website containing all the standard features of an ordinary website you may use everyday. For example it should contain structured text, tables, linking pages, contact forms, external links and descriptions of links or images when the user hovers over them with the cursor.
Along with this in a theory based lesson, we was introduced to how to create tables through the use of HTML language.


Luckily it is far more simple than I anticipated, as this is something that has confused me in the past when thinking how it was done.
Any table can be started by just writing <table border="1"> and then underneath that, <tr> and then again underneath <tr>, place a <td> tag. It must be placed within the confines of the body tags.
The <tr> tag is to imply a table row and the <td> tag is to represent the table data, or the text that will appear in the table. Bare in mind all respective tags must be closed with a "/", just like the and </p> tags.
For example:
<table border="1">
<tr>
<td>Section One</td>
<td>Section Two</td>
</tr>
<tr>
<td>Section Three</td>
<td>Section Four</td>
</tr>
</table>
Would appear in a browser as:

We can also add "Colspan", to increase to horizontal span of a column, or"Rowspan" to increase the vertical span of a column.

These are added to the <td> line,

 for example:

<table border="1">
<tr>
<td colspan="2">Section One</td>
</tr>
<tr>
<td>Section Two</td>
<td>Section Three</td>
</tr>
</table>

Would appear as:

 

We can also apply headers to the tables, simply by adding a <th> to the top row of a table, <th> stands for Table Header.

For example:

<table border="1">
<tr>
<th>Name</th><th>Location</th>
</tr>
<tr>
<td>Benji Dawson</td><td>Sheffield</td>
</tr>
<tr>
<td>Chris Shellard</td><td>Oxford</td>
</tr>
</table>

Would appear as: <tr>

<th> is always preferred over just using another <td> above the table as it automatically makes the text contained within it bold.

It is also possible to add a caption for the table by using <caption> tags before any table rows:

<table border="1">

<caption>Student Information</caption>
<tr>
<th>Name</th><th>Location</th>
</tr>
<tr>
<td>Benji Dawson</td><td>Sheffield</td>
</tr>
<tr>
<td>Chris Shellard</td><td>Oxford</td>
</tr>
</table>

Would appear as:

On a final note, it is possible to add "Assets" to tables tags in CSS, just like any other tags.

This Can be done by:

table{

font-family:Arial,San Serif;

background-color:black;

color:white;

}

The same can be applied to,

caption{

font-family:Arial,San Serif;

background-color:black;

color:white;

}

th{

font-family:Arial,San Serif;

background-color:black;

color:white;

}

td{

font-family:Arial,San Serif;

background-color:black;

color:white;

}

This lets you target segments of your web page accordingly.

After yet another week having a lot of information thrown at me, once again I did at first panic, but now after digesting and typing this blog I am starting to understand HTML more and more. I realise I have a long way to go, but for now I am quite comfortable with the language, which is something I did not expect to get to grips with at this stage. More time must be spent again in my free time to ensure I do not fall behind with this module.

Thanks for reading!