Creating Tables in HTML ( Part 1 )
Lessons Covered


You use tables all the while to represent some form of data. Tables consist of columns and rows. Each of these contain some sort of information.



The Table Tag

Tables are created by the table tag ( <table> ). The table tag also has a number attributes.


The Border Attribute

The border attribute is used to specify the thickness of the the lines around the table (i.e. the lines surrounding the table data).

Applying the border attribute to the table tag:

<table border="2">
<tr>
<td> New2HTML.com </td>
</tr>
</table>

right arrow  Click to see result

Note: If a value is not specified for the border attribute the contents of the table will be displayed without one. The tr and td tags you see in the above code snippet are discussed below.


The Tr & Td Tag

The table row tag ( <tr> ), is used to add a new row to a table.

After you have added a table row you may add data to that row by using the table data ( <td> ) tag.

Below is a table with two table rows and two columns:

<table border="2">
  
	   <tr>
		<td> Apple   </td>
		<td> Chicken </td>
	   </tr>
  
	   <tr>
		<td> Banana  </td>
		<td> Rice    </td>
	   </tr>
</table>

right arrow  Click to see result

Note: Once you're in a table row the first <td> tag enters the data in the first column, the second <td> tag in the same row enters the data in the second column. When you start a new row the process repeats, the first <td> tag enters the data in the first and again the second in the second column.


The Th Tag

The table header tag ( <th> ) is used to set the column headings of a table.

Example:

<table border="2">
  
  <tr>
   <th> Fruits     </th> 
   <th> Not Fruits </th> 
  </tr>   
	
	   <tr>
		<td> Apple   </td>
		<td> Chicken </td>
	   </tr>
  
	   <tr>
		<td> Banana  </td>
		<td> Rice    </td>
	   </tr>
</table>

right arrow  Click to see result


The Align Attribute

The align attribute when applied to a table sets the position of that table.

The align attribute can accept 3 values. The values are left, center and right.

In this code snippet the align attribute value is set to center: 

<table border>="2" align="center">
<tr>
<td> New2HTML.com </td>
</tr>
</table>

right arrow  Click to see result

Note: The align attribute is depreciated in HTML 4.01 strict.


The Width Attribute

The width attribute can also be applied to tables. By using the attribute you can determine how wide a table is on your web page.

Example:

<table border="2" width="70%">
<tr>
<td> New2HTML.com </td>
</tr>
</table>

right arrow  Click to see result

Note: The value of the width attribute can be set using a percentage value or by a pixel value.


    Previous Lesson Previous Lesson - Images                                         Next Lesson - Tables (Part 2) Next Lesson