Table

Tables

---

Tables come in very handy in HTML, not just for presenting data but for designing the layout of your page.
As you are new to HTML I am going to show you how to create your own basic table. Many beginners find tables very daunting and I was no different, dont worry if you dont get it first time, keep trying and it will eventually all fall into place!

---

1. There are 3 main tags for the table we will be creating:

Table - <table>
Table Row - <tr>
Table Cell - <td>

I will now show you how to create the following table:

Cell1	Cell2
Cell3	Cell4

And here's the code:

<table border>

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

</tr>

<tr>

<td>Cell 3</td>

<td>Cell 4</td>

</tr>

</table>

As you can see, the first table row encloses cells 1 and 2; the second table row encloses cells 3 and 4. Table rows always run horizontally. The contents of each cell - in this case, the words "Cell 1" or "Cell 2" - are sandwiched between the <td> and </td> tags.

In order to see the table, I added border to the table tag. This simply turns the border on. You can also specify its width by adding a number, as in <table border=5>.

---

"Colspan" and "rowspan"
You can also make a cell in one row stretch across two cells in another. Like this:

Cell 1
Cell 3 Cell 4

To accomplish this, you have to use the colspan modifyer. Just add colspan=2 to the <td>, and voilà!

<table border>

<tr>

<td colspan=2>Cell 1</td>

</tr>

<tr>

<td>Cell 3</td>

<td>Cell 4</td>

</tr>

</table>

You can also do this:

Cell 1 Cell 2
Cell 3

Just add rowspan=2 to the <td>, like so:

<table border>

<tr>

<td rowspan=2>Cell 1</td>

<td>Cell 2</td>

</tr>

<tr>

<td>Cell 3</td>

</tr>

</table>

Just remember: Rows run horizontally, columns run vertically. So if you want to stretch a cell horizontally, use colspan. To stretch a cell vertically, use rowspan.

{NOTE:-IF YOU WANT TO CHANGE THE TEXT COLOR IN SINGLE ROW IN THE TABLE. WRITE THIS IN UNDER THE "TR" COMMAND}:-
<TR STYLE="COLOR:RED">