Featured Templates
Home
HTML and CSS
Tutorials
Advanced Formatting
Added: Oct 03, 2005 Rating: Less than 3 votes yet
Level: Beginner Software:
Basic Tables
- Well, as I know you know by now, basic HTML does not actually give you much control over where things go on your page.
- For the most part, the browser gets to determine placement and you are left simply communicating general layout instructions.
- However with the introduction of HTML 2.0 in 1995 came the first really powerful tools for HTML layout: Tables.
- Tables give you the ability to position elements in your page with much greater accuracy.
- Of course, the original intent of HTML Tables was to provide a way to present tabular data in rows and columns.
- Thus the first tables looked something like the following:
| Column One Header | Column Two Header |
|---|---|
| Row One/Column One | Row One/Column Two |
| Row Two/Column One | Row Two/Column Two |
- A table is composed of several tags that are outlined in the table below:
<TABLE></TABLE>
Specifies an HTML table. (By default the table will have no borders)
<TH> </TH>
Specifies a Table Header Cell
<TR> </TR>
Specifies a Table Row Cell
<TD> </TD>
Specifies a Table Column Cell
- Thus, the following code would create the very basic table that was shown previously:
<HTML> <HEAD> <TITLE>Table Example</TITLE> </HEAD> <BODY> <TABLE> <TR> <TH>Column One Header</TH> <TH>Column Two Header</TH> </TR> <TR> <TD>Row One/Column One</TD> <TD>Row One/Column Two</TD> </TR> <TR> <TD>Row Two/Column One</TD> <TD>Row Two/Column Two</TD> </TR> </TABLE> </BODY> </HTML> |
- One thing to keep in mind about tables is that you may incorporate regular HTML formatting tags within a table. Thus you could make the contents of a cell bold with the following table cell definition:
| <TD><B>This text is bold</B></TD> |
Table Attributes
- As you can see, the basic table is horridly bland.
- Fortunately, the <TABLE> tag comes with several attributes to make it look nicer.
- The attributes are shown in the table below:
ALIGN
Specifies how text will wrap around the table. This works the same as the ALIGN parameter for images. Valid values include RIGHT or LEFT
BGCOLOR
Colors the table background just as it would when used with the <BODY> tag.
BORDER
Specifies the pixel width of the border that divides table cells and the table itself. This table is set to BORDER = "1".
CELLPADDING
Specifies the amount of white space between the borders of a table and the actual data in the cell. The default is "1"
CELLSPACING
Specifies the amount of space inserted between table cells. The default is "2"
HEIGHT
Specifies the height of the table in absolute pixels or as a percentage of the available space.
WIDTH
Specifies the width of the table in absolute pixels or as a percentage of the available space
Tables by Example
- Let's take a look at a few examples...
- Here is a basic table with no border.
| Column One Header | Column Two Header |
|---|---|
| Row One/Column One | Row One/Column Two |
| Row Two/Column One | Row Two/Column Two |
- Here is the code for that table:
<TABLE> <TR> <TH>Column One Header</TH> <TH>Column Two Header</TH> </TR> <TR> <TD>Row One/Column One</TD> <TD>Row One/Column Two</TD> </TR> <TR> <TD>Row Two/Column One</TD> <TD>Row Two/Column Two</TD> </TR> </TABLE> |
- Here is the same table with a border of 4.
| Column One Header | Column Two Header |
|---|---|
| Row One/Column One | Row One/Column Two |
| Row Two/Column One | Row Two/Column Two |
- Here is the code for that table:
<TABLE BORDER = "4"> <TR> <TH>Column One Header</TH> <TH>Column Two Header</TH> </TR> <TR> <TD>Row One/Column One</TD> <TD>Row One/Column Two</TD> </TR> <TR> <TD>Row Two/Column One</TD> <TD>Row Two/Column Two</TD> </TR> </TABLE> |
- Here is the same table with a border of 4 and a CELLPADDING of 10.
| Column One Header | Column Two Header |
|---|---|
| Row One/Column One | Row One/Column Two |
| Row Two/Column One | Row Two/Column Two |
- Here is the code for that table:
<TABLE BORDER = "4" CELLPADDING = "10"> <TR> <TH>Column One Header</TH> <TH>Column Two Header</TH> </TR> <TR> <TD>Row One/Column One</TD> <TD>Row One/Column Two</TD> </TR> <TR> <TD>Row Two/Column One</TD> <TD>Row Two/Column Two</TD> </TR> </TABLE> |
- Here is the same table with a border of 4, a CELLPADDING of 10, and a CELLSPACING of 10.
| Column One Header | Column Two Header |
|---|---|
| Row One/Column One | Row One/Column Two |
| Row Two/Column One | Row Two/Column Two |
- Here is the code for that table:
<TABLE BORDER = "4" CELLPADDING = "10"
CELLSPACING = "10">
<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>
<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>
<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>
|
- Here is the same table with a border of 4 and colored cells.
| Column One Header | Column Two Header |
|---|---|
| Row One/Column One | Row One/Column Two |
| Row Two/Column One | Row Two/Column Two |
- Here is the code for that table:
<TABLE BORDER = "4" BGCOLOR = 'YELLOW"> <TR> <TH>Column One Header</TH> <TH>Column Two Header</TH> </TR> <TR> <TD>Row One/Column One</TD> <TD>Row One/Column Two</TD> </TR> <TR> <TD>Row Two/Column One</TD> <TD>Row Two/Column Two</TD> </TR> </TABLE> |
- Here is the same table with a pixel width of 100.
| Column One Header | Column Two Header |
|---|---|
| Row One/Column One | Row One/Column Two |
| Row Two/Column One | Row Two/Column Two |
- Here is the code for that table:
<TABLE BORDER = "4" WIDTH = "100"> <TR> <TH>Column One Header</TH> <TH>Column Two Header</TH> </TR> <TR> <TD>Row One/Column One</TD> <TD>Row One/Column Two</TD> </TR> <TR> <TD>Row Two/Column One</TD> <TD>Row Two/Column Two</TD> </TR> </TABLE> |
- Here is the same table with a border of 4 and a pixel width of 80%.
| Column One Header | Column Two Header |
|---|---|
| Row One/Column One | Row One/Column Two |
| Row Two/Column One | Row Two/Column Two |
- Here is the code for that table:
<TABLE BORDER = "4" WIDTH = "80%"> <TR> <TH>Column One Header</TH> <TH>Column Two Header</TH> </TR> <TR> <TD>Row One/Column One</TD> <TD>Row One/Column Two</TD> </TR> <TR> <TD>Row Two/Column One</TD> <TD>Row Two/Column Two</TD> </TR> </TABLE> |
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com
10 Random HTML and CSS Tutorials :
10 Random Markuptutorials.com Materials: