Styling Tables

Tables are a wonderful thing. They help save space, they help you organize your content better or just to display thins on more columns.

First of all I am going to explain you the codes you need for the table:

<table>
<tr>
<td> First Cell </td>
<td> Second Cell </td>
</tr>

<tr>
<td> Third Cell </td>
<td> Fourth Cell </td>
</tr>
</table>

So you have the <table> and </table> tags, which are mandatory for each table. They are defined codes that indicate that your table starts and ends.
<tr< is the code for a row. So in a row you will have more cells that will be part of your columns.
<td> is the code for a cell. In a row you will have more cells so this will appear multiple times.
Let’s see how it looks like if we just use this code:

First Cell Second Cell
Third Cell Fourth Cell

It just arranged our text into a four cell table. But we don’t have any styling to it. We will get there. Now, you can set the size of the table and the row. I usually make the table 100% and after that I divide the columns into smaller percents:

<table width=”100%”>
<tr width=”100%”>
<td width=”40%”> First Cell </td>
<td width=”60%”> Second Cell </td>
</tr>

<tr width=”100%”>
<td width=”40%”> Third Cell </td>
<td width=”60%”> Fourth Cell </td>
</tr>
</table>

So it looks like this:

First Cell Second Cell
Third Cell Fourth Cell

No we can start styling it. Styling the table is actually really simple. You just have to add style=”” iside the tag you want to style and you can add the styling you want. I want to put a different background on cells, I want to change the font color and add some spaces between cells. But remember you can style it as you want. So my code looks like this:

<table width=”100%”>
<tr width=”100%”>
<td width=”40%” style=”background:#4e1326; color:#fff; margin:2px; padding:5px;” > First Cell </td>
<td width=”60%” style=”background:#f84781; color:#000; margin:2px; padding:5px;” > Second Cell </td>
</tr>

<tr width=”100%”>
<td width=”40%” style=”background:#4e1326; color:#fff; margin:2px; padding:5px;” > Third Cell </td>
<td width=”60%” style=”background:#f84781; color:#000; margin:2px; padding:5px;”> Fourth Cell </td>
</tr>
</table>

First Cell Second Cell
Third Cell Fourth Cell

Basically this is how I style my tables. You can add or remove rows, you can add photos as background images, you can add shadow, margins. You can do anything you like. Enjoy styling your tables.