Basic Tables
Tables can be used to organize web page content and/or provide structure to the entire layout of the web page as a whole.
Tables are composed of rows (which go across the page) and columns (which go down the page). A table cell is located at the intersection of a row and a column.
Tables are created with the <table></table> tag. We'll deal with more t ab le attributes in the next lesson. For now, besides knowing how to configure the cells in the table, you must put in the BORDER attribute or you will not see any of the table lines. Border values can span between 0 and 100. The attribute is placed within the tag like this:
<table border=?>
where ? is the width of the table.
Each table row is created with the <tr></tr> tag. Each table cell (table data item) is created with the <td></td> tag. Thus, the following code would produce the 3 row x 3 column table pictured below it:
Tables are composed of rows (which go across the page) and columns (which go down the page). A table cell is located at the intersection of a row and a column.
Tables are created with the <table></table> tag. We'll deal with more t ab le attributes in the next lesson. For now, besides knowing how to configure the cells in the table, you must put in the BORDER attribute or you will not see any of the table lines. Border values can span between 0 and 100. The attribute is placed within the tag like this:
<table border=?>
where ? is the width of the table.
Each table row is created with the <tr></tr> tag. Each table cell (table data item) is created with the <td></td> tag. Thus, the following code would produce the 3 row x 3 column table pictured below it:
Be very careful to close all your <tr> and <td> tags as failure to do so may result in some unexpected results.
Replacing the first set of <td> tags with table heading <th> tags will distinguish the titles from the body content of the table. This code (changes in bold):
Replacing the first set of <td> tags with table heading <th> tags will distinguish the titles from the body content of the table. This code (changes in bold):
TABLE ATTRIBUTES:
Besides the border size, tables can have the following attributes changed within<table> the tag.
ALIGN:
<table align="?">
where ? can be left, right, or center. This attribute will align the entire table on the page.
BORDERCOLOR:
<tabale bordercolor="#?">
where ? should be the name of a color.
TABLE BACKGROUND COLOR:
<table bgcolor="#?">
where ? should be any of the hexadecimal color numbers discussed in the color section of this course.
WIDTH:
<table width="?">
where ? is EITHER the width of the table in pixels or expressed as a percentage of the page.
examples: <table width="500"> or<table width="75%">
note: The height attribute is usually dealt with through the cell attributes which will be covered in the next lesson.
Besides the border size, tables can have the following attributes changed within<table> the tag.
ALIGN:
<table align="?">
where ? can be left, right, or center. This attribute will align the entire table on the page.
BORDERCOLOR:
<tabale bordercolor="#?">
where ? should be the name of a color.
TABLE BACKGROUND COLOR:
<table bgcolor="#?">
where ? should be any of the hexadecimal color numbers discussed in the color section of this course.
WIDTH:
<table width="?">
where ? is EITHER the width of the table in pixels or expressed as a percentage of the page.
examples: <table width="500"> or<table width="75%">
note: The height attribute is usually dealt with through the cell attributes which will be covered in the next lesson.