Hi, and welcome to this tutorial where I will attempt to explain how to build tables without using plugins or changing your style sheet.

For members who are not familiar, or have a limited knowledge of HTML, it may look overwhelming at first, but I will take you step-by-step in building your table before adding the content. Below is an example of a table I built using HTML code:

and this is the HTML code that built it:

<table class="aligncenter" style="width: 560px;" cellspacing="0" cellpadding="0">
<tbody>
<table style="border: 1px solid #000000;">
<tr>
<td style="border: 1px solid #000000; background-color: #ffffff; width: 140px; vertical-align: middle; text-align: center; line-height: 0pt;" colspan="4"><span style="font-family: arial; color: #000000; font-size: 12pt; text-transform: capitalize;"><strong>your heading goes here</strong></span></td>
</tr>
<tr>
<td style="border: 1px solid #000000; background-color: #ffffff; width: 280px; vertical-align: middle; text-align: center; line-height: 0pt;" colspan="2"><span style="font-family: arial; color: #000000; font-size: 11pt; text-transform: capitalize;"><strong>your sub-heading goes here</strong></span></td>
<td style="border: 1px solid #000000; background-color: #ffffff; width: 280px; text-align: center; vertical-align: middle; line-height: 0pt;" colspan="2"><span style="font-family: arial; color: #000000; font-size: 11pt; text-transform: capitalize;"><strong>your sub-heading goes here</strong></span></td>
</tr>
<tr>
<td style="border: 1px solid #000000; width: 140px; text-align: center; line-height: 0pt;">
<span style="font-family: arial; color: #000000; font-size: 10.5pt; text-transform: capitalize;"><em>wealthy affiliate</em></span></td>
<td style="border: 1px solid #000000; width: 140px; text-align: center; line-height: 0pt;">
<span style="font-family: arial; color: #000000; font-size: 10.5pt; text-transform: capitalize;"><em>wealthy affiliate</em></span></td>
<td style="border: 1px solid #000000; width: 140px; text-align: center; line-height: 0pt;">
<span style="font-family: arial; color: #000000; font-size: 10.5pt; text-transform: capitalize;"><em>wealthy affiliate</em></span></td>
<td style="border: 1px solid #000000; width: 140px; text-align: center; line-height: 0pt;">
<span style="font-family: arial; color: #000000; font-size: 10.5pt; text-transform: capitalize;"><em>wealthy affiliate</em></span></td>
</tr>
<tr>
<td style="border: 1px solid #000000; width: 140px; text-align: center; line-height: 0pt;">
<p style="width: 110px; margin-top: -15px;"><img src="http://wreckingsite.siterubix.com/wp-content/uploads/2016/04/WA-Logo-3.png" alt="This Little Square Logo" width="110" height="110" class="aligncenter size-full wp-image-1313" /></p>
<p style="width: 100px; font-family: arial; font-size: 10pt; color: #000000; margin-top: -45px; margin-bottom: -25px; line-height: 18px; text-align: left; padding-left: 0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></td>
<td style="border: 1px solid #000000; width: 140px; text-align: center; line-height: 0pt;">
<p style="width: 110px; margin-top: -15px;"><img src="http://wreckingsite.siterubix.com/wp-content/uploads/2016/04/wa_uncover_secrets-120x120.png" alt="Uncover Secrets Logo" width="110" height="110" class="aligncenter size-full wp-image-1320" /></p>
<p style="width: 100px; font-family: arial; font-size: 10pt; color: #000000; margin-top: -45px; margin-bottom: -25px; line-height: 18px; text-align: left; padding-left: 0px;">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Integer potenti hendrerit dignissim felis.</p>
</td>
<td style="border: 1px solid #000000; width: 140px; text-align: center; line-height: 0pt;">
<p style="width: 110px; margin-top: -15px;"><img src="http://wreckingsite.siterubix.com/wp-content/uploads/2016/04/wa_like_to_earn-120x120.jpg" alt="Like To Earn Logo" width="110" height="110" class="aligncenter size-full wp-image-1323" /></p>
<p style="width: 100px; font-family: arial; font-size: 10pt; color: #000000; margin-top: -45px; margin-bottom: -25px; line-height: 18px; text-align: left; padding-left: 0px;">Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
</td>
<td style="border: 1px solid #000000; width: 140px; text-align: center; line-height: 0pt;">
<p style="width: 110px; margin-top: -15px;"><img src="http://wreckingsite.siterubix.com/wp-content/uploads/2016/04/WA-Black-Friday-Banner.png" alt="Black Friday Logo" width="110" height="110" class="aligncenter size-full wp-image-1325" /></p>
<p style="width: 100px; font-family: arial; font-size: 10pt; color: #000000; margin-top: -45px; margin-bottom: -25px; line-height: 18px; text-align: left; padding-left: 0px;">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</td>
</tr>
</tbody
</table>

You will notice that I use both the<p></p> and <span></span> tags. Now, why the <p></p> and <span></span> tags?

Using the <p></p> tag will automatically create a blank line space at the end of your paragraphs. if you used it in your headings it would double the cell height and would align your header text top, bottom. or center, whichever you had chosen. Personally, I prefer headings to be in the cell height that accommodates them, as they will automatically increase according to the font size, that is why I use <span></span> tags for table and cell headings

So, why not use them for the descriptive text? There are certain attributes that are not recognized by the <span></span> tag, such as the margin-top, margin-bottom attributes, these can only be activated by using the <p></p> tags and lets you control the spacing of your descriptive text such as margin-top: 00px; or margin-bottom: 00px; to increase space. To reduce space just add a hyphen, or dash (-), -00px.