Difference between revisions of "HTML:Tables"

From mi-linux
Jump to navigationJump to search
 
(20 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]]
 
==Introduction==
 
==Introduction==
  
Line 27: Line 30:
 
The easiest way to show you how tables work is to give you some examples.
 
The easiest way to show you how tables work is to give you some examples.
  
−
  <nowiki><TABLE><TR><TD>Hello</TD></TR></TABLE></nowiki>
+
  <nowiki><!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></nowiki>
  
−
===<font color=red>TIME TO PRACTICE</font>===
+
*'''TIME TO PRACTICE'''
 +
**Try the example above - your page should look like this
  
−
Try the example above
+
[[Image:table1.png|Is this right?]]
 +
 
 +
Where is the table?  Let's take a look at the source diagram (you can get diagrams like these by adding the [https://addons.mozilla.org/en-US/firefox/addon/655 View Source Chart] add-on to Firefox)
 +
 
 +
[[Image:table2.png|Document Structure of Table 1]]
 +
 
 +
Perhaps we might start to see the table more clearly if we add a border?
  
 
==Borders==
 
==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 the BORDER attribute of the <nowiki><TABLE></nowiki> tag:
+
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 <nowiki><TABLE></nowiki> tag:
  
−
  <nowiki><TABLE border=1><TR><TD>Hello</TD></TR></TABLE></nowiki>
+
  <nowiki>
 +
    <TABLE style="border:1px solid">
 +
      <TR>
 +
        <TD>
 +
          Hello
 +
        </TD>
 +
      </TR>
 +
    </TABLE></nowiki>
  
 
The following is a more complex table example:
 
The following is a more complex table example:
  
 
  <nowiki>
 
  <nowiki>
−
  <TABLE border=1>
+
  <TABLE style="border:1px solid">
−
<TR>
+
  <TR>
−
<TD><STRONG>Name</STRONG></TD>
+
    <TH>Name</TH>
−
<TD><STRONG>Age</STRONG></TD>
+
    <TH>Age</TH>
−
</TR>
+
    </TR>
−
<TR>
+
    <TR>
−
  <TD>Sue</TD><TD>35</TD>
+
      <TD>Sue</TD>
−
</TR>
+
      <TD>35</TD>
−
<TR>
+
    </TR>
−
  <TD>Tim</TD><TD>43</TD>
+
    <TR>
−
</TR>
+
      <TD>Tim</TD>
−
<TR>
+
      <TD>43</TD>
−
  <TD>Alan</TD><TD>55</TD>
+
    </TR>
−
</TR>
+
    <TR>
 +
      <TD>Alan</TD>
 +
      <TD>55</TD>
 +
    </TR>
 
  </TABLE></nowiki>
 
  </TABLE></nowiki>
  
−
===<font color=red>TIME TO PRACTICE</font>===
+
*'''TIME TO PRACTICE'''
−
 
+
**Try the example above.
−
Try the example above.
 
  
 
==Indenting your code==
 
==Indenting your code==
Line 73: Line 100:
  
 
  <nowiki>
 
  <nowiki>
−
  <TABLE border=1>
+
  <TABLE style="border:1px solid">
 
  <TR>
 
  <TR>
−
   <TD bgcolor="green">THE GREEN SQUARE</TD>
+
   <TD style="background-color:green">THE GREEN SQUARE</TD>
−
   <TD bgcolor="red">THE RED SQUARE</TD>
+
   <TD style="background-color:red">THE RED SQUARE</TD>
 
  </TR>
 
  </TR>
 
  <TR>
 
  <TR>
−
   <TD bgcolor="yellow">THE YELLOW SQUARE</TD>
+
   <TD style="background-color:yellow">THE YELLOW SQUARE</TD>
−
   <TD bgcolor="blue">THE BLUE SQUARE</TD>
+
   <TD style="background-color:blue">THE BLUE SQUARE</TD>
 
  </TR>
 
  </TR>
 
  </TABLE></nowiki>
 
  </TABLE></nowiki>
  
−
===<font color=red>TIME TO PRACTICE</font>===
+
*'''TIME TO PRACTICE'''
−
 
+
** Try the example above.
−
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:
 
Perhaps you might like to change the colour of the PADDING between the cells.  Try the example above, but replace the first line with:
  
−
  <nowiki><TABLE border=1 bgcolor="aqua"></nowiki>
+
  <nowiki><TABLE style="border:1px solid; background-color:aqua"></nowiki>
  
 
==Padding and Spacing the Cells==
 
==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 an attribute of the table
+
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.
  
−
===CELLPADDING===
+
===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)
  
−
CELLPADDING controls the gap between the text in the cell and the wall of the cell.
+
Amend the example above with the following:
−
Amending the example above with the following:
+
<nowiki><TD style="background-color:green; padding:10px">THE GREEN SQUARE</TD></nowiki>
  
−
  <nowiki>
+
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.
−
<TABLE border=1 bgcolor="aqua" cellpadding=15></nowiki>
 
  
−
Note the size of the cell contents area and the size of the gap between the cells.
+
===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.
  
−
===CELLSPACING===
+
Amend the example above with the following:
 +
<nowiki><TABLE style="border:1px solid; background-color:aqua; border-spacing:10px"></nowiki>
  
−
CELLSPACING controls the gaps between the cells. Amend the example again like the following:
+
The attribute being changed is the "border-spacing" - this sets 10px space between each cell and the next.
−
<nowiki>
 
−
<TABLE border=1 bgcolor="aqua" cellspacing=15></nowiki>
 
  
−
===<font color=red>TIME TO PRACTICE</font>===
+
*'''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.
  
−
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]]
  
−
==Ready to move on?==
+
=Related Pages=
−
Are you happy with your knowledge of tables?  Ready to move on?  Try [[07 - Forms]]
+
<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

Is this right?

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)

Document Structure of Table 1

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>

Retrieved from "https://mi-linux.wlv.ac.uk/wiki/index.php?title=HTML:Tables&oldid=6687"