Icon Table in WordPress Pages

Icon Tables are used to display your icons that you may create. They look very neat and efficient and I use them on my icon pages. However because div’s don’t work in WordPress pages it presents a problem. However here is a way to get around this. We will be using tables instead.

1. First we need to start off with the actual table, and we need to give it a class so that the css can be linked to it and therefore the style of the table can be changed easily.

<table class="tableicon">

2. Next we need to create a row where the icon header will go and will contain the numbers. Therefore we need to add a table row as the next part of the code and also add table data. In this instance the table data has been assigned the iconheader class. There are usually 4 icon headers in 1 row.

<tr><td class="iconheader"> 001 </td>
<td class="iconheader">002</td>
<td class="iconheader">003</td>
<td class="iconheader">004 </td></tr>

3. Then to hold the actual icons you need to add another table row and table data. In this instance you will need to assign the table data as class=”icon”. Then in between the table data tags add your image.

<tr><td class="icon"><img src="YOURICONHERE" alt=""/>
</td><td class="icon"><img src="YOURICONHERE" alt=""/>
</td><td class="icon"><img src="YOURICONHERE" alt=""/></td>
<td class="icon"><img src="YOURICONHERE" alt="" /></td></tr>

4. Add all that code together and you have created the first row of the icon table. To repeat simply copy the iconheader code and then the icon code and paste them into your WordPress pages so it should look something like this:

<table class="tableicon">
<tr><td class="iconheader"> 001 </td><td class="iconheader">002</td>
<td class="iconheader">003</td><td class="iconheader">004 </td>
</tr>
<tr><td class="icon"><img src="YOURICONHERE" alt=""/>
</td><td class="icon"><img src="YOURICONHERE" alt=""/>
</td><td class="icon"><img src="YOURICONHERE" alt=""/>
</td><td class="icon"><img src="YOURICONHERE" alt="" /></td></tr>

<tr><td class="iconheader"> 001 </td><td class="iconheader">002</td>
<td class="iconheader">003</td><td class="iconheader">004 </td></tr>
<tr><td class="icon"><img src="YOURICONHERE" alt=""/></td>
<td class="icon"><img src="YOURICONHERE" alt=""/></td><td class="icon">
<img src="YOURICONHERE" alt=""/></td><td class="icon">
<img src="YOURICONHERE" alt="" /></td></tr>

</table>
 

5. Now we need to code the CSS for the icon table otherwise it will look like any other table.
Open your style.css file and add this code below into your css.

.tableicon {
border-spacing:3px;
text-align:center;
padding:3px;
}

.iconheader {
color:#fff;
background:#545454;
text-align:center;
border:1px solid #000;
padding-top:5px;
padding-bottom:5px;
}

.icon {
text-align:center;
background:#fff;
border-color:#777;
border-style:solid;
border-width:1px;
padding:5px;
}

You can always edit the CSS to your liking later but this is the basic styling for your icon table.
Save your style.css file and then you’re done.