Using HTML codes to create Tables

Part 1: HTML
Part 2: HTML Attributes
Part 3: HTML Table
Part 4: Colspan and Rowspan

Tables are defined with <table> tag and it is made of rows (<tr>) and columns (<td>). Tr means table row and td means table data.

• To start creating table, you need an opening table tag, which is <table> and to end it, is to use table closing tag which is </table>.
• To start creating horizontal table rows you need the opening tag <tr> and after entering number of column/s you need to end it with a closing tag </tr>.
• To start making column in the table, as usual you need the opening tag <td> and after entering all the data, close it with a closing tag which is <td>.
• To create another new column in a row, you can simply repeat the step described above before ending it with a tr closing tag, which is </tr>.

Here you can see the example below for better understanding:

<table> <tr> <td>Cell A</td> <td>Cell B</td> </tr> <tr> <td>Cell C</td> <td>Cell D</td> </tr> </table>

Cell A Cell B Cell C Cell D

You can see the HTML codes at the left and the outcome at the right.
This how it works:

Rows = horizontal lines of cells
Columns = vertical lines of cells

You can also add attributes to specify the width, color, alignment or thickness of the border around the table. Here, one of the example of table with attributes:

The table HTML codes with attributes (red text):

<table width="513" height="166" border="3" align="center" bordercolor="yellow" bgcolor="green">

<tr>

<td align="right" valign="top"><strong>Look at my text now,..<br />
My text appear at the top-right corner of the box</strong></td>

</tr>

</table>

The result will be:

Look at my text now,.. My text appear at the top-right corner of the box

“Valign” is to specify the vertical alignment of the content in a cell.
“align” is to specify the horizontal alignment of the contennt in the entire table, in a row or in a cell. For example, right, left or center.

What's the difference between HTML and XHTML What is CSS?