This site has limited support for your browser. We recommend switching to Edge, Chrome, Safari, or Firefox.

Free HTML Template for Tables

Here’s a template I usually use to construct tables in HTML. This code controls for the width of the columns, so you can widen or narrow the size of each columns in your table.


In the following code, to adjust the width, locate <td style=”width:20%”> that corresponds to the column you are trying to modify and change the percentage accordingly.

You can also use a set measurement, such as in pixel (px) to set your column width, so instead of <td style=”width:20%”>, you can use <td style="width:200px">, for instance.

Scroll down underneath this code block to see a rendering of how this code displays.

<table>
  <tbody>
    <tr>
      <td style="width:20%">Column 1</td>
      <td style="width:20%">Column 2</td>
      <td style="width:20%">Column 3</td>
      <td style="width:20%">Column 4</td>
    </tr>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 3</td>
    </tr>
  </tbody>
</table>

 

Here is how the code template renders:

Column 1 Column 2 Column 3 Column 4
Row 1 Row 1 Row 1 Row 1
Row 2 Row 2 Row 2 Row 2
Row 3 Row 3 Row 3 Row 3

Hi, I'm Ryan.

Over the past 10 years, I've lived & worked in 5 cities across 3 countries.

I like helping others to move abroad, and helping them to decide whether they should.

MY VISA GUIDE →

Spark a Conversation

Cart

No more products available for purchase