Difference between revisions of "HTML:Tables"
| (4 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| + | [[Main Page]] >> [[4CC002|Website fundamentals]] >> [[4CC002Workbook|Workbook]] >> [[HTML]] >> Tables - Rows and Columns | ||
| + | |||
[[Category:HTML]] | [[Category:HTML]] | ||
==Introduction== | ==Introduction== | ||
| Line 139: | Line 141: | ||
**At the end of each chapter, you should practice the lessons you have learned. Use your topic, as discussed in the first chapter, and try to add the new techniques you have found, into your pages. | **At the end of each chapter, you should practice the lessons you have learned. Use your topic, as discussed in the first chapter, and try to add the new techniques you have found, into your pages. | ||
| − | + | =Ready to move on?= | |
Are you happy with your knowledge of tables? Ready to move on? Try [[HTML:Forms]] | Are you happy with your knowledge of tables? Ready to move on? Try [[HTML:Forms]] | ||
| + | |||
| + | =Related Pages= | ||
| + | <categorytree mode=pages>HTML</categorytree> | ||
Latest revision as of 15:00, 12 July 2011
Main Page >> Website fundamentals >> Workbook >> HTML >> Tables - Rows and Columns
Introduction
There is again a mixture of opinions on the subject of tables. Most people agree that tables are a simple quick effective means of formatting content within a web page (they work the same way as a table in a spreadsheet or word document) however, some argue that CSS is the best way of arranging content on a page. For the purposes of this workbook we will continue to use tables as a formatting tool.
The Table Tag
The table tag is used to create the basic table structure. It defines and controls many aspects of the table’s appearance, some of which are discussed later in this chapter.
Tables are created by first creating an empty table, then creating rows within the table, then creating cells within the rows – Tables, Rows, then Cells. One or many cells can be on a row, one or many rows within a table.
The basic table tag is:
<TABLE></TABLE>
There are a number of ways to alter the general appearnce
The Table Row Tag
The <TR> tag creates a row in the table.
<TR></TR>
The Table Cell Tag
The <TD> Tag is where the heart of table formatting is controlled. The <TD> tag creates a cell, or an individual box within your table. It has many attributes that you can set.
The easiest way to show you how tables work is to give you some examples.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE> put your title here </TITLE>
</HEAD>
<BODY>
<TABLE><TR><TD>Hello</TD></TR></TABLE>
</BODY>
</HTML>
- TIME TO PRACTICE
- Try the example above - your page should look like this
Where is the table? Let's take a look at the source diagram (you can get diagrams like these by adding the View Source Chart add-on to Firefox)
Perhaps we might start to see the table more clearly if we add a border?
Borders
What’s wrong? Where is my table? YOU’VE DONE NOTHING WRONG!!! The table exists; it is a single cell on a single row in a table. In order to put a box around the table, you need to set a border in the STYLE attribute of the <TABLE> tag:
<TABLE style="border:1px solid">
<TR>
<TD>
Hello
</TD>
</TR>
</TABLE>
The following is a more complex table example:
<TABLE style="border:1px solid">
<TR>
<TH>Name</TH>
<TH>Age</TH>
</TR>
<TR>
<TD>Sue</TD>
<TD>35</TD>
</TR>
<TR>
<TD>Tim</TD>
<TD>43</TD>
</TR>
<TR>
<TD>Alan</TD>
<TD>55</TD>
</TR>
</TABLE>
- TIME TO PRACTICE
- Try the example above.
Indenting your code
Indenting the code when writing tables is critical – you can see from the example above that it takes quite a few lines of code to generate a table with just a few cells in it. When creating large tables of many cells it can get quite difficult when needing to make changes, in trying to find where the line is that you want to change. Therefore it is critical that you indent your code to make it more understandable. All code within the table should be indented, and all code within each row should be indented again – this helps make the code more readable, and...
Matthew's Rule 11 – All HTML code must be correctly indented
Indentation in coding is critical to readability and reduces the time required to find sections that need to be changed. Failure to indent correctly in assessed work will significantly reduce your grade.
Colours in Tables
<TABLE style="border:1px solid"> <TR> <TD style="background-color:green">THE GREEN SQUARE</TD> <TD style="background-color:red">THE RED SQUARE</TD> </TR> <TR> <TD style="background-color:yellow">THE YELLOW SQUARE</TD> <TD style="background-color:blue">THE BLUE SQUARE</TD> </TR> </TABLE>
- TIME TO PRACTICE
- Try the example above.
Perhaps you might like to change the colour of the PADDING between the cells. Try the example above, but replace the first line with:
<TABLE style="border:1px solid; background-color:aqua">
Padding and Spacing the Cells
It is possible to control the distance between each cell, and also the space between the contents of the cell and the "wall." Each of these is controlled by CSS.
Padding
In order to control the distance from the contents of the cell to the cell border, we can use the "padding" attribute of each cell (TD)
Amend the example above with the following:
<TD style="background-color:green; padding:10px">THE GREEN SQUARE</TD>
Note the size of the cell contents area and the size of the gap between the cells. "10px" is ten pixels spacing between the cell contents and the cell border.
Spacing
In order to control the space between each cell (i.e. from the outer wall of one cell to the outer wall of the next cell) we alter the style of the table, NOT THE STYLE OF EACH CELL.
Amend the example above with the following:
<TABLE style="border:1px solid; background-color:aqua; border-spacing:10px">
The attribute being changed is the "border-spacing" - this sets 10px space between each cell and the next.
- TIME TO PRACTICE
- At the end of each chapter, you should practice the lessons you have learned. Use your topic, as discussed in the first chapter, and try to add the new techniques you have found, into your pages.
Ready to move on?
Are you happy with your knowledge of tables? Ready to move on? Try HTML:Forms
Related Pages
<categorytree mode=pages>HTML</categorytree>
