Creating Tables in HTML

In this post lets see how to create a table in the html document. At the beginning it might seem complicated, but trust me its not. Before starting with the code, you need to understand the basics of standard table.

A table can be divided into two basic parts. One is the row and other is the column.

  • Rows are arranged one below the other
  • Columns are arranged side by side

You can see a table in the image above. I just used excel document for explaining the basics of table. Now in this table, the blue part is the column. Column goes from top to bottom. While the red part is the row. Row goes from left to right.

So again to remember the difference between rows and column:

  • Column goes from top to bottom
  • Row goes from left to right

Table Tags

Now to add a table to the html document you need the these tags:

  • Opening table tag – <table>
  • Closing table tag </table>
But just adding the table tags wont help you. You need to add rows and data to your table. Note that we are not adding columns. The table will be formed just by adding rows and table data. Each box which stores data is called as Cell. Note: Table data is denoted by <td> while Table row is denoted by <tr>
  • Opening row tag – <tr>
  • Closing row tag – </tr>
  • Opening data tag – <td>
  • Closing data tag – </td>

Convention of adding tags

  • First comes the table
  • Then comes row. (Row is within table tags)
  • And then comes data. (Data is within Row tags)

Creating first table with one Row and two Cells

Lets go ahead and create a very simple table which has only 1 row and two cells (two data boxes). For this purpose we will use the code given below:

[html]

<table>

<tr>
<td> Hello </td>
<td> World </td>
</tr>

</table>
[/html]

It would simply result into nothing more than “Hello World” text on your web page as shown below:

Now you might wonder what just happened? We added a table but we are not getting one! Actually our text is within the table. But we are not able to see the table because we didn’t specify the table border.

Table Border

If you don’t specify the table border then the borders of your table will be simply invisible. And if you want your table borders to show up you need to specify the border attribute to your table tag.

To add a border attribute, you need to modify the opening table tag. Just change it to:

[html] <table border="1"> [/html]

In the code above we specified the border value as 1. Its basically the thickness of the table border.

Recreating first table with table border

Now lets modify our first table and add table border to it.

[html]

<table border="1">

<tr>
<td> Hello </td>
<td> World </td>
</tr>

</table>

[/html]

This time we get a table with one row and two cells along with the table border.

Adding multiple rows

Now lets modify the previous code and add more rows to our table. I think instead of my explanation, the example itself will help you to understand in a better way.

[html]

<table border="1">

<tr>
<td> Hello </td>
<td> World </td>
</tr>

<tr>
<td> Omkar </td>
<td> Bhagat </td>
</tr>

<tr>
<td> Bye </td>
<td> World </td>
</tr>

</table>

[/html]

Adding multiple cells/columns

To add multiple data cells, you just need to add more of table data blocks inside table row blocks. Lets create a table having following properties:

  1. 1st  row, 3 cells
  2. 2nd row, 5 cells
  3. 3rd row, 2 cells

[html]

<table border="1">

<tr>
<td> Hello </td>
<td> World </td>
<td> Again </td>
</tr>

<tr>
<td> Omkar </td>
<td> Bhagat </td>
<td> loves </td>
<td> code </td>
<td> fap </td>
</tr>

<tr>
<td> Bye </td>
<td> World </td>
</tr>

</table>

[/html]

So we finally made a table which has 3 rows and each row has different number of cells. I know this looks ugly at the moment. But trust me it will turn into a beautiful table when we learn CSS (Cascading style sheet).

HTML is just the outline, but CSS adds all the styles and design to your web page. I will begin CSS tutorials when i finish up with basic HTML Tutorials and you are definitely going to love it. So keep following Codefap.com .. Thanks!

 

Leave a Reply