Editing Tables with HTML (eCreator)

This guide will show you how to edit tables with HTML code.  To begin with, we'll look at some of the key 'tags' that will allow you to customise your page and can also be used for other purposes, such as changing the colour of the text.


How to View the HTML Code 


Click the Source code icon while you are in the page content text editing window.    

This will open the Source Code popup window.

Although the code look scary, don't worry as we'll look at this step by step.

HTML Tags Overview


We'll only cover the HTML tags that are relevant to the content you're likely to want to edit.  HTML tags are the building blocks of web page code and describe the different elements, or headings, of the web page.  Each tag has an open (denoted by < and >) and a close (denoted by </ and >) section to it.

For example, to open a paragraph, we would use the letter p like this: <p>.  At the end of our paragraph, we would close it by using the letter p again but with the slash included, like this: </p>.

Browsers interpret the code and display the web page accordingly.

HTML Tags We'll Cover

  • Span (style) tag - this allows text to apply a style to a block of text on the page: <span> (open) </span> (close).
  • Hyperlink (to link to another web page) or anchor (to allow you to jump to another section within the same web page) tag: <a> (open) </a> (close).   NB an anchor tag would also include a # to tell the page not to navigate away.
  • Table tag - shows where a table starts and ends: <table> (open) </table> (close)
  • Image tag - shows where an image has been inserted: <img the name of the image would be inserted here />.  NB this tag does not have two separate img tags.
The &nsbp tag is automatically inserted into some tags, such as table columns (<td>).   It is purely a non-breaking space (in other words, the cannot be broken by text wrap) and can be removed when you add your content to the page. If you needed to, you could add the  &nsbp tag several times in order to create a space within the page that would show when you are viewing it.  For example:

I can add                           this much space.

Using the Space bar on your keyboard will also insert this tag automatically if you want to use it for spacing purposes.  

As described in the Span tag above, we'll use it to transform sections of our text by wrapping it around the text.

Working with Fonts (Text)


While reading through the below examples, you may find it beneficial to open up the page content editor and follow along using some of your own text.


Changing Font Colour 

There are 3 ways to change the font colour in HTML. In each of these examples, we are using the same Span tag to wrap the text we wish to format but using different properties to tell the browser the colour we want it to display:

  1. With the name of the colour - <span style=”color: red;”>TEXT TO FORMAT</span>
  2. With the colour hex value - <span style=”color: #FF0000;”>TEXT TO FORMAT</span>
  3. With the colour RGB value - <span style=”color: rgb(255,0,0);”>TEXT TO FORMAT</span>*

*Please note the RGB value doesn’t work in IE8.  If you want to use a specific colour and are unsure what its hex or RGB value would be, you can either use a search engine to help you or use a word processor, such as Word, and find the value within the colour properties.

This is an example of how we make this word red and this is how the code for it looks:

This is an example of how we make <span style="color: red;">this word</span> red and this is how the code for it looks.


Changing Font Size

You can also change the font size by wrapping the text you wish to format in a Span tag.  This time, we will add the property called font-size to it, followed by the size we want, in order to tell the browser what to do, like the example below:

<span style=”font-size:22px;”>TEXT TO FORMAT</span>

This is an example of how we make this word much bigger and this is how the code for it looks:  

This is an example of how we make <span style="font-size: 22px;">this word</span> much bigger and this is how the code for it looks.


Changing Font Colour and Size


You can combine the above phases we have looked at above within the Span tag in order to change the text colour and size at the same time, as in the example below:

<span style=”color: red; font-size: 22px;”>TEXT TO FORMAT</span>

This is an example of how we make this word red and much bigger and this is how the code for it looks:    

This is an example of how we make <span style="color: red; font-size: 22px;">this word</span> red and much bigger and this is how the code for it looks.



Editing Tables


While reading through the below examples and information, you may find it beneficial to open up the page content editor and follow along using a table you have inserted into the page.  

Table Tags Overview


Here is how you can recognise a table and its parts within the HTML code:
  • The Table itself - will begin <table> and end </table>
  • Table Rows - will begin <tr> and end </tr>
  • Table Columns - will begin <td> and end </td>
  • Table Headers (usually bold and centred) - begin with <th> and end </th>
As before with the text editing, properties can be added into the tags so that the table will be displayed correctly when the page is viewed.  For example, if you have added a table to the page and dragged the handles out, the code may look something like this (sometimes the code will be set at column/row levels instead - we'll look at this as well):

<table style="height: 38px; width: 601px;" border="0">

Using the skills we have just learned, we know that the table is 601 pixels wide by 38 pixels high.  We can see whether the table has a border and how thick it is.  In the example, it doesn't, however if it did, the value would be 1 for a 1 pixel border, 2 for 2 pixels, etc.  We also know that as the </table> isn't displayed, that this code sets the overall parameters at the start of the table.  We can then look at the code underneath to find out how many rows and columns it has.

If you added a table with multiple columns, you will see those columns are nested within the table row code.  For example, a row that is divided into 3 columns would look something like this:

<tr>                                  this is the start of the row
<td>&nbsp;</td>            this is the first column (on the left-hand side) and it just contains a space at the moment
<td>&nbsp;</td>            this is the middle column and it just contains a space at the moment  
<td>&nbsp;</td>            this is the last column (on the right-hand side) and it just contains a space at the moment  
</tr>                                 this is the end of the first row


If you want to set the row height manually (rather than dragging in the editor window), you can do so by editing the table row code.  For example, to set the row to 40 pixels high, the code would look like this:

<tr style="height: 40px;">

NB see how this code goes at the beginning of the table row (denoted by the <tr> tag)? Any text/columns you have inserted would follow on from this.


Similarly if you wanted to set a column width manually to 40 pixels wide, the code would look something like this:

<td style="width: 40px;">

As with the table row above, any content you have inserted, such as text, would follow on from this and end with </td>.  If you have not added anything yet, your code might just have a space (&nbsp) in between the open and close column tags.

With columns, you can also choose to set the width by percentages rather than pixels.  If you wanted to set your column width to 30%, for example, the code would look like this instead:

<td style="width: 30%;">


If we wanted to create a 1 row, 3 column table with a fixed height of 50 pixels and the first column set at 50 pixels with the rest at 20 pixels, the code would look something like this:

<table>                                                                       this is the start of the table
<tr style="height: 50px;">                                       this is the start of the row
<td style="width: 50px;">Hello there!</td>             this is the first column (on the left-hand side) and the text says Hello there!
<td style="width: 20px;">Yes</td>                          this is the middle column and the text says Yes 
<td style="width: 20px;">No</td>                           this is the last column (on the right-hand side) and the text says No  
</tr>                                                                            this is the end of the row
</table>                                                                      this is the end of the table

Try it yourself!  Once you have saved the changes, it should look like this:



You will note that your table should display correctly within the editor however when you save the changes, it may appear to stretch to fill the available space, as above.  Click on the green Preview button at the top or bottom of the screen to ensure that the table is working correctly:



Setting the Background Colour of a Table


Background colours can be added to the table (<table>), row (<tr>)or column (<td>) tags, depending on how you want your table to look.

As with the Font Colour properties above, there are 3 ways to write the colour code:
  • With the name of the colour - ”background-color: red;”
  • With the colour hex value - ”background-color: #FF0000;”
  • With the colour RGB value - ”ba ckground-color: rgb(255,0,0);”*
*Please note the RGB value doesn’t work in IE8.  If you want to use a specific colour and are unsure what its hex or RGB value would be, you can either use a search engine to help you or use a word processor, such as Word, and find the value within the colour properties.  

For example, if we wanted to turn a whole table blue, we could you the following code at the beginning of your table code:

<table style="background-color: blue;">

It would look like this when you click on Preview:


If you just wanted to turn the top row blue, for example, to use behind headings, you could use the following code at the beginning of your row code:

<tr style="background-color: blue;">

It would look like this when you click on Preview:


If you wanted to turn a column blue, the code at the beginning of each column you want to colour would look like this:

<td style="background-color: blue;">

It would look this this when you click on Preview:


You can also combine the code we have learnt in order to control more than one aspect of the table at a time.  For example, if you wanted to have a blue top row, that's 50 pixels high and has white text, your code might look like this:

<tr style="height: 50px; background-color: blue; color: white;">

And it will display like this:


Adding Borders to a Table


Although the examples we have been using for our tables have been fairly easy to read, sometimes you will want to add a table border to make the content more understandable. For this to work, we'll add a style sheet to the top of the code in the source window.  This just means that the setting is applied across the whole page and therefore the table.  If you didn't do this, you would need to add the border colour and style properties to each table row and table column, which would become tedious.

As you can see with the example below, adding a table border makes the table easier to read:

You will need to add the following code to the top of the Source code window (above the code for your table):

<style><!--
table {
  border-collapse: collapse;
}
td, tr {
  border: 1px solid orange;
}
--></style>


Let's have a look at this code in detail so that you can understand what it does:

<style><!--    this is the beginning of the style sheet code and tells the browser that one has been set up  
table {           this advises the browser that the next line of code will apply to the whole table and } denotes the start 
border-collapse: collapse;  this advises that the borders will shrink to one line - you don't have to add this however it gives the lines a better look  
}                    this is the end of the table code 
td, tr {           this advises the browser that the next line of code will apply to the table columns (td) and rows (tr).  If you just added the tr code, the borders would only show between the rows  
border: 1px solid orange;  this advises of the parameters of the border style.  In this case, it's one pixel wide, with a solid line in orange but these values can be amended
}                    this is the end of the column/row code   
--></style>   this is the end of the style sheet code


Merging Table Cells


A tutorial on how to create merged cells within a table using Microsoft Word can be found in the Editing Tables with Word section of the Extending Layouts with Tables guide.  The steps below show you how to do the same using HTML instead.

Merging Table Columns


First locate the columns that you would like to merge within the HTML code.  Don't forget that the tag for columns is <td>.

Colspan is the property we'll use to merge the columns together and in order for the browser to interpret the code as a merged column, we'll also need to tell it how many columns should be merged.  For example, if we wanted to merge two columns together, we would use the code colspan="2".

Using the table code we've used above, we'll amend the code so that the Heading 2 and Heading 3 columns are merged instead.  Here is a reminder of the code at present (including the changes made with the colours):

<table>
<tbody>  this code may be added by the system automatically - don't worry as it is only another 'wrapper' to show the browser where all of the table elements start and finish
<tr style="height: 50px; background-color: blue; color: white;">
<td style="width: 50px;">Heading 1</td>
<td style="width: 20px;">Heading 2</td>
<td style="width: 20px;">Heading 3</td>
</tr>
<tr style="height: 50px;">
<td style="width: 50px;">Hello there!</td>
<td style="width: 20px;">Yes</td>
<td style="width: 20px;">No</td>
</tr>
</tbody>
</table>


Locating the Heading 2 and 3 columns, this is the section we want to amend:


It is easier to delete the whole row of HTML for the Heading 3 column and then amend the code for the Heading 2 column so that it now includes colspan="2".  That section of code will now look something like this (note that as the columns are now merged, the width code has been amended to 40 pixels - 20 + 20 pixels from the original column widths):

<tbody>
<tr style="height: 50px; background-color: blue; color: white;">
<td style="width: 50px;">Heading 1</td>
<td style="width: 40px;" colspan="2">Heading 2</td>
</tr>


Merging Table Rows


Working with HTML in order to amend table rows works in the same way as working with columns however the property we'll use is rowspan.  The same rules apply here in terms of telling the browser how to interpret the merged rows, so if we want to tell it that two rows are merged, we would write rowspan="2"

Let's reuse the table code again for this example:

<table>
<tbody>  this code may be added by the system automatically - don't worry as it is only another 'wrapper' to show the browser where all of the table elements start and finish
<tr style="height: 50px; background-color: blue; color: white;">
<td style="width: 50px;">Heading 1</td>
<td style="width: 20px;">Heading 2</td>
<td style="width: 20px;">Heading 3</td>
</tr>
<tr style="height: 50px;">
<td style="width: 50px;">Hello there!</td>
<td style="width: 20px;">Yes</td>
<td style="width: 20px;">No</td>
</tr>
</tbody>
</table> 

As we only have 2 rows in this table anyway, we'd end up with a 1 row, 3 column table if you applied the code across all columns, which you wouldn't do as you'd just create it that way in the first place.  Instead, we can use the power of merging rows in parts (cells) to create a table that looks like this:

In order to get to a table that looks like the above, we'll add another 2 rows to the table first to make sure that we have a bit more to work with, so the code will now look something like this:

<table>
<tbody>
<tr style="height: 50px; background-color: blue; color: white;">    first row
<td style="width: 50px;">Heading 1</td>
<td style="width: 20px;">Heading 2</td>
<td style="width: 20px;">Heading 3</td>
</tr>
<tr style="height: 50px;">                                                                     second row
<td style="width: 50px;">Hello there!</td>
<td style="width: 20px;">Yes</td>
<td style="width: 20px;">No</td>
</tr>
<tr style="height: 50px;">                                                                     third row
<td style="width: 50px;">Bye bye!</td>
<td style="width: 20px;">Left</td>
<td style="width: 20px;">Right</td>
</tr>
<tr style="height: 50px;">                                                                     fourth row
<td style="width: 50px;">The end!</td>
<td style="width: 20px;">Up</td>
<td style="width: 20px;">Down</td>
</tr>
</tbody>
</table>


Your table will look something like this when previewed:


What we'll do now is merge the Hello there! and Bye bye! rows together as in the original image using the rowspan property.  Locate the Hello there! column and amend the code like this:

<tr style="height: 50px;">                                           
<td style="width: 50px;" rowspan="2">Hello there!</td>
<td style="width: 20px;">Yes</td>
<td style="width: 20px;">No</td>
</tr>  


If you Save and Preview at this point, you'll notice that the table has gone a bit awry:

This is because although we have successfully ensured that the first and second rows in column 1 are merged, we have not looked at the code containing Bye bye! therefore the browser will still try to display it, hence knocking the Right text into another cell.  To fix this, all we need to do is locate the Bye bye! code (as it was originally in the cell underneath Hello there! so should be merged with that cell):

<tr style="height: 50px;">                                                                   
<td style="width: 50px;">Bye bye!</td>
<td style="width: 20px;">Left</td>
<td style="width: 20px;">Right</td>
</tr>  

Highlight it and delete it so that the code looks like this:

<tr style="height: 50px;">                                                                  
<td style="width: 20px;">Left</td>
<td style="width: 20px;">Right</td>
</tr>    


Click
on Save and Preview and you should find that the table now displays correctly:



Feedback and Knowledge Base