Holla Tech-Learn

Creating a Table


Tables are defined by using the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table columns (table data) with the <td> tag.

Here is an example of a table with one row and three columns: 

<table>
   <tr>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>

NOTE!
Table data <td> tags act as data containers within the table. They can contain all sorts of HTML elements, such as text, images, lists, other tables, and so on.

The border and colspan Attributes

A border can be added using the border attribute:

<table border=“2”>

A table cell can span two or more columns:

<table border=“2”>

   <tr>
      <td>Red</td>
      <td>Blue</td>
      <td>Green</td>
   </tr>
   <tr>
      <td><br /></td>
      <td colspan=“2”><br /></td>
   </tr>
</table>

 

Result:

Holla Tech-Learn HTML

NOTE!
The border attribute is not supported in HTML5.

Colspan Color

The example below demonstrates the colspan attribute in action:

<table border=“2”>
   <tr>
      <td>Red</td>
      <td>Blue</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Yellow</td>
      <td colspan=“2”>Orange</td>
   </tr>
</table>

 

Result:

Holla Tech-Learn HTML

You can see that the cell containing “Orange” spans two cells.

NOTE!
To make a cell span more than one row, use the rowspan attribute.

The align and bgcolor Attributes
 

To change your table’s position, use the align attribute inside your table tag:

<table align=”center”>
 


Now let’s specify a background color of red for a table cell. To do that, just use the bgcolor attribute.

<table border=“2”>
   <tr>
      <td bgcolor=“red”>Red</td>
      <td>Blue</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Yellow</td>
      <td colspan=“2”>Orange</td>
   </tr>
</table>

 

Result

Holla Tech-Learn HTML

NOTE!
In the case of styling elements, CSS is more effective than HTML. Try our free “Learn CSS” course to learn more about CSS and styles. 

 

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE HTML MAIN COURSE PAGE. 

HTML MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT