Making HTML Tables

Questions about HTML to Contact: StudentWeb Help

Section 5.1: Basic Tables

Tables are more simple HTML. Just like in making lists you need to tell the browser that this is going to be a table. This is done with the <TABLE> tag. From there you need to tell the tabel that you want to make a row, this is done with the <TR>, or "Table Row". Next you need to specify a "Block" in the row with the <TD> tag. You would then input your text or image (your "stuff") and then end each tag. </TD>, </TR>, and </TABLE>.

Here is a basic table example:
			- DISCRIPTIONS-
<TABLE>			<-- Start the Table <TR> <-- Start the 1st row <TD>stuff 1</TD> <-- row 1 block 1 <TD>stuff 2</TD> <-- row 1 block 2 </TR> <-- End the 1st row <TR> <-- Start the 2nd row <TD>stuff 3</TD> <-- row 2 block 1 <TD>stuff 4</TD> <-- row 2 block 2 </TR> <-- End the 2nd row </TABLE> <-- End the Table

Here is the above code in action:

stuff1 stuff2
stuff3 stuff4


There are a few modifiers that you can use in the <TABLE> tag. The 2 basics are:
  • BORDER=XXX
  • CELLPADDING=XXX
    Where XXX is a number. Here is the above example with all the same code except the opening "TABLE" tag is now:
    <TABLE BORDER=4 CELLPADDING=10>

    stuff1 stuff2
    stuff3 stuff4


    Notice the shaded border around the table from the BORDER
    Also notice the extra space around the "stuff" from the CELLPADDING

    • Section 5.2: More On Tables

    If you are interested in having a block be more than one row high or one collum wide, then you will need to add the appropiate modifier in the <TD> tag. The two modifiers are:
  • COLSPAN=XXX
  • ROWSPAN=XXX
    COLSPAN lets your block be more than 1 collum wide where ROWSPAN makes it more than one row high here are some examples: 
    <TABLE BORDER=2>
<TR>             
<TD COLSPAN=2>stuff 1</TD> 
</TR>            
<TR>             
<TD>stuff 3</TD>    
<TD>stuff 4</TD>    
</TR>            
</TABLE>
    Gives this table:

    stuff 1
    stuff 3 stuff 4


    An exampe for ROWSPAN would be: 
    <TABLE BORDER=2>
<TR>
<TD ROWSPAN=2>stuff 1</TD>
<TD>stuff 2</TD>
</TR>
<TR>
<TD>stuff 3</TD>     
</TR>
</TABLE>
    Gives this Table:

    stuff 1 stuff 2
    stuff 3


    Finally for a Big example of COLSPAN and ROWSPAN: 
    <TABLE BORDER=2>
<TR>
<TD COLSPAN=2>stuff 1</TD>
<TD ROWSPAN=3>stuff 5</TD>
</TR>
<TR>
<TD ROWSPAN=2>stuff 2</TD>
<TD>stuff 3</TD>
</TR>
<TR>
<TD>stuff 4</TD>
</TR>
</TABLE>
    Gives a table looking like:

    stuff 1 stuff 5
    stuff 2 stuff 3
    stuff 4

    • Section 5.3: Table Decorations

    Within tables you may want to do some HTML... feel free. All HTML will work within tables, if you want bold use <B> as you normaly would same for headers, links, images, etc. there are however a few shortcuts. The main shortcut is the <TH> tag. what this tag does is very similer to the <TD> tag, but it also centers, and bolds the text within. view this example: 
    <TABLE BORDER=4 CELLPADDING=2 WIDTH=50%>                   
<TR>                      
<TH>stuff 1</TH>     
<TD><CENTER><B>stuff 2</B></CENTER></TD>     
</TR>                     
<TR>                      
<TD>stuff 3</TD>     
<TD>stuff 4</TD>     
</TR>                     
</TABLE>
    Looks like:

    stuff 1
    stuff 2
    stuff 3 stuff 4


    Notice the how "Stuff 1" and "Stuff 2" are the same but the code for "Stuff 1" is much more simple.

    You may also notice the WIDTH attribute. This specifies the Width of the table in relation to the page (much like it does in the <HR> tag).

    The final decorative atrribute that i will tell you about is the BGCOLOR="X" attribute. This is used in a <TD> tag, and it will color the background of your table block, (this does not work on all browsers but most of the newer ones it does). The X stands for a color that is in Hex RGB Just like the atributes in the <BODY> tag. (If you need a listing see HTML help     Section 2.4: Color Help Here is an Example: 
    <TABLE BORDER=4 CELLPADDING=4 >
<TR>
<TD BGCOLOR="#00FF00">stuff 1</TD>		(Green)
<TD>stuff 2</TD>
</TR>
<TR>
<TD>stuff 3</TD>
<TD BGCOLOR="#0000FF">stuff 4</TD>		(Blue)
</TR>
</TABLE>

    Which Gives:

    stuff 1 stuff 2
    stuff 3 stuff 4

    Questions about HTML to Contact: StudentWeb Help

    Help Index - Help Page 1 - Help Page 2
    Help Page 3 - Help Page 4 - Help Page 5