How to Create Spectacular Table with html, CSS

Table takes an important place in designing a page to show text data in tabular form. In this tutorial, we’re going to demonstrate various tricks, tips and strategies to create html Table with spectacular CSS styling.

But we’re not going to represent the whole process of creating Table in a single tiresome page. Reasonably to make it a happy-reading, the full tutorial will be divided in several lessons. All pages will be linked to all pages.

Just take this page as ‘Netplanter Table Home‘ page. So, no ado! Let’s start.

Basic structure of html Table

Table element

In course of Table creation, just start with this code:

<table>
</table>

HTML element <table> is used to create a Table. This is a Block level element. All table structure and data will go within <table> and </table> tag.

Table Row

Table must contain Rows and Columns. Table Row is specified with <tr> tag. All Row data and information will go within <tr> and </tr> tag. If your Table needs four rows, set <tr> ... </tr> tag-pair four times within <table> ... </table> tag. Just as shown below.

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

Table Column

Table column is specified within each <tr> and </tr> tag in form of Table Header (<th> ... </th>) and Table Data (<td> ... </td>).

If you need Table Header; specify it within first <tr> ... </tr> tag-pair. Use <th> ... </th> tag-pair the time as many columns as you need. This means if you need three columns, set <th> ... </th> tag-pair three times. Look below:

<table>
<tr> 
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr> 
</tr>
<tr> 
</tr>
<tr> 
</tr>
</table>

Now within rest of the <tr> ... </tr> tag-pair, set <td> ... </td> tag. As you’re going to set three columns, put <td> ... </td> tag-pair three times in each <tr> ... </tr> tag-pair.

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

Thus you created a three-column four-row table. Noted, it is not essential that you use Table Header.

Now let’s put some text as Table Header and Table Data and see the output:

CODE

<table>
<tr> 
<th>Header R1 C1 </th>
<th> Header R1 C2</th>
<th> Header R1 C3</th>
</tr>
<tr> 
<td> Data R2 C1 </td>
<td> Data R2 C2</td>
<td> Data R2 C3 </td>
</tr>
<tr> 
<td>Data R3 C1 </td>
<td> Data R3 C2 </td>
<td> Data R3 C3 </td>
</tr>
<tr> 
<td>Data R4 C1  </td>
<td> Data R4 C2 </td>
<td>Data R4 C3  </td>
</tr>
</table>

Noted, in the table texts, R means Row and C means Column.

OUTPUT

Go on exploring!