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:

Properties:
Rows: Columns:
	Table width:	% px
	Table height:	% px
	Column width:	% px
	Row height:	% px
	Header background-color:
	Body background-color:
	border-color:
	border-width:	px
	border-style:	none dotted dashed solid double groove ridge inset outset
	border-collapse:	separate collapse
	border-spacing:	px
	text-align:	left center right
	padding:	px
	caption-side:	top bottom
	caption align:	left center right
Generate Table Reset
Click on table to enter table data:
Table 1 Header 1 Header 2 Header 3 Header 4
Code:
Select Code

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;
}