HTML Tutor Tables

HTML Table 1x1

    HTML Tables are an advanced HTML code you can use when you make your own web site. Setup much like a checker board, cells are arranged by rows and columns. Each cell holds either text or web page graphics.

    Once we learn how to adjust the cells in a table, we can put text or graphics just about anywhere we want on your own web page.

index.htm - Notepad
...
<table border=1>
  <tr>
    <th>1st Col</th>
  </tr>
</table>

...
Web Tables - BrowserName
1st Col




    The table codes all reside within the <table></table> tags. The border=1 modifier makes the lines around the table and also between the cells. I've used this as it's easier to see the following examples. Great layouts are possible with this cool HTML code.

    The <tr></tr> tags define the rows, while the <td></td> or <th></th> tags define the columns. Notice each of these tags have the opening and closing tags. This is extremely important, as some browsers show a blank page if you get this wrong.

more about table tag...

more about table TR tag...

more about table TH tag...



HTML Table 1x3

    OK, now we add a couple of columns. This is done by including a couple sets of <th></th> tags.

    The difference between the <td> tag and the <th> tag is simply that the <th> tag treats the enclosed text like headings.

    Notice the indentations. This is not a requirement, but it makes matching up open/close tags so much easier.

index.htm - Notepad
...
. <table border=1>
  <tr>
    <th>1st Col</th>
    <th>2nd Col</th>
    <th>3rd Col</th>
  </tr>
</table>

...
Web Tables - BrowserName
1st Col 2nd Col 3rd Col




    The table codes all reside within the <table></table> tags. The border=1 modifier makes the lines around the table and also between the cells. I've used this as it's easier to see the following examples. Great layouts are possible with this cool HTML code.

    The <tr></tr> tags define the rows, while the <td></td> or <th></th> tags define the columns. Notice each of these tags have the opening and closing tags. This is extremely important, as some browsers show a blank page if you get this wrong.

more about table tag...

more about table TR tag...

more about table TH tag...



HTML Table 2x3

    We can add a second row with another set of <tr></tr> tags for rows, then fill the cells for each column using the <td></td> tags.

    If you haven't noticed the pattern, look closely at this example and compare to the last few examples. Understanding this pattern makes the process easy.

index.htm - Notepad
...
. <table border=1>
  <tr>
    <th>1st Col</th>
    <th>2nd Col</th>
    <th>3rd Col</th>
   </tr><tr>
    <td>A text</td>
    <td>B text</td>
    <td>C text</td>
  </tr>
</table>

...
Web Tables - BrowserName
1st Col 2nd Col 3rd Col
A text B text C text




more about table tag...

more about table TR tag...

more about table TH tag...

more about table TD tag...



Color rows or cells

    To color a row, just add a bgcolor modifier to the <tr> tag. To color a cell, just add the bgcolor modifier to the <td> tag. You can color the entire table by adding the bgcolor modifier to the <table> tag.
index.htm - Notepad
...
. <table border=1>
  <tr bgcolor="red" >
    <th>1st Col</th>
    <th>2nd Col</th>
    <th>3rd Col</th>
   </tr><tr>
    <td bgcolor="green" >A text</td>
    <td>B text</td>
    <td>C text</td>
  </tr>
</table>

...
Web Tables - BrowserName
1st Col 2nd Col 3rd Col
A text B text C text




more about table tag...

more about table TR tag...

more about table TH tag...

more about table TD tag...



Make a Row Span Multiple Columns

    To color a row, just add a bgcolor modifier to the <tr> tag. To color a cell, just add the bgcolor modifier to the <td> tag.

    We threw in an align=center modifier too. Our choices are left, center and right. This can be very useful and the code is shorter than using the <center></center> tags.

index.htm - Notepad
...
. <table border=1>
  <tr bgcolor="cyan">
    <td colspan=3 align=center>
      Web Page Title
    </td>
  </tr>
  <tr bgcolor="red">
    <th>1st Col</th>
    <th>2nd Col</th>
    <th>3rd Col</th>
   </tr><tr>
    <td bgcolor="green">A text</td>
    <td>B text</td>
    <td>C text</td>
  </tr>
</table>

...
Web Tables - BrowserName
Web Page Title
1st Col 2nd Col 3rd Col
A text B text C text




more about table tag...

more about table TR tag...

more about table TH tag...

more about table TD tag...




Turn Off Table Borders

    Turning off the borders just allows everything to just kind of float in space. If you watch web pages closely as you surf, many pages use this technique. It allows you to place items on the screen virtually anywhere you want them.

    You can especially see this on the cells B Text and C Text.

index.htm - Notepad
...
<table border=0 >
  <tr bgcolor="cyan">
    <td colspan=3 align=center>
      Web Page Title
    </td>
  </tr>
  <tr bgcolor="red">
    <th>1st Col</th>
    <th>2nd Col</th>
    <th>3rd Col</th>
   </tr><tr>
    <td bgcolor="green">A text</td>
    <td>B text</td>
    <td>C text</td>
  </tr>
</table>

...
Web Tables - BrowserName
Web Page Title
1st Col 2nd Col 3rd Col
A text B text C text




more about table tag...

more about table TR tag...

more about table TH tag...

more about table TD tag...