HTML table generator

This online HTML table generator tool allows you to easily create HTML tables with the desired settings. Simply fill in all required properties of the table on the right side and click on the "Generate" button. The preview table will be generated below. Even more down you will find a code that you can copy and use wherever you want.

Enter HTML Table properties and press the Generate Table button:

px
px
px
Click on table to enter table data:
Table 1
Header 1 Header 2 Header 3 Header 4
       
       
       
       


HTML Table tags syntax

Define HTML table

  • The <table> tag defines an HTML table.
  • Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.
  • By default, the text in <th> elements are bold and centered.
  • By default, the text in <td> elements are regular and left-aligned.

HTML Table - Add a Border

To add a border to a table, use the CSS border property:

table, th, td {
  border: 1px solid black;
}

HTML Table - Collapsed Borders

To let the borders collapse into one border, add the CSS border-collapse property:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

HTML Table - Add Cell Padding

  • Cell padding specifies the space between the cell content and its borders.
  • If you do not specify a padding, the table cells will be displayed without padding.
  • To set the padding, use the CSS padding property:
th, td {
  padding: 15px;
}

HTML Table - Left-align Headings

  • By default, table headings are bold and centered.
  • To left-align the table headings, use the CSS text-align property:
th {
  text-align: left;
}

HTML Table - Add Border Spacing

  • Border spacing specifies the space between the cells.
  • To set the border spacing for a table, use the CSS border-spacing property:
table {
  border-spacing: 5px;
}

Note: If the table has collapsed borders, border-spacing has no effect.

HTML Table - Cell that Spans Many Columns

To make a cell span more than one column, use the colspan attribute:

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

HTML Table - Cell that Spans Many Rows

To make a cell span more than one row, use the rowspan attribute:

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

HTML Table - Add a Caption

To add a caption to a table, use the <caption> tag:

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Note: The <caption> tag must be inserted immediately after the <table> tag.

A Special Style for One Table

To define a special style for one particular table, add an id attribute to the table:

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Now you can define a special style for this table:
#t01 {
  width: 100%;
  background-color: #f1f1c1;
}
And add more styles:
#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}


Currently, we have around 931 calculators, conversion tables and usefull online tools and features to make your life easier or simply help you to do your work or duties faster and in more effective way. These below are the most commonly used by many users at all

And we are still developing more. Our goal is to become the one-stop, go-to site for people who need to make quick calculations or who need to find quick answer for basic conversions.

Additionally, we believe the internet should be a source of free information. Therefore, all of our tools and services are completely free, with no registration required. We coded and developed each calculator individually and put each one through strict, comprehensive testing. However, please inform us if you notice even the slightest error – your input is extremely valuable to us. While most calculators on Justfreetools.com are designed to be universally applicable for worldwide usage, some are for specific countries only.


This website uses cookies to improve your experience, analyze traffic and display ads. Learn more