HTML Table Styling with CSS

It's easy to create beutiful HTML tables with the online styler. All you have to do is activate the "Style CSS" button, select a template or start blank. You can set the styles of the whole table, body, header and footer in separate panels.

Activate the Online Table Styler in the Table Generator.

Change the font, border, colors, cell padding, sizes and other styles.

The Same Table With Different Styles

Below you can see the same HTML table with three different CSS styles. They have the same source code, with different class names assigned to them.

default unstyled table
Unstyled HTML table, with default Google Chrome styles.

<table>
  <thead>
    <tr>
      <th>Model</th>
      <th>Price</th><th>Range</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Model S</td>
      <td>83,900</td><td>405 mi</td>
    </tr>
    <tr>
      <td>Model 3</td>
      <td>42,900</td><td>272 mi</td>
    </tr>
    <tr>
      <td>Model X</td>
      <td>99,990</td><td>351 mi</td>
    </tr>
    <tr>
      <td>Model Y</td>
      <td>54,990</td><td>330 mi</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td><td>USD</td><td>Miles</td>
    </tr>
  </tfoot>
</table>

Model	Price	Range
Model S	83,900	405 mi
Model 3	42,900	272 mi
Model X	99,990	351 mi
Model Y	54,990	330 mi
	USD	Miles

Model	Price	Range
Model S	83,900	405 mi
Model 3	42,900	272 mi
Model X	99,990	351 mi
Model Y	54,990	330 mi
	USD	Miles

Model	Price	Range
Model S	83,900	405 mi
Model 3	42,900	272 mi
Model X	99,990	351 mi
Model Y	54,990	330 mi
	USD	Miles

Most Important Table Styles

Below you will find the most important table styling options. Use the online styler or do them manually. Watch out and avoid obsolete methods.

Border

Setting table border with the "border" tag attribute is obsolete and we should use CSS instead.

The table generator allows you to set border for the whole table and the body individually. You can set the width with a slider and adjust the color in a color picker. Uncheck the checkbox to disable this feature.

<table border="2"> Obsolete!
table border obsolete
W3 markup validator throws an error for using the border attribute for a table tag.

<table style="border: 5px dashed grey">
  <tr style="border: 5px solid green">
    <td style="border: 5px dotted blue">
      AAA
    </td>
    <td>BBB</td>
  </tr>
  <tr>
    <td>CCC</td>
    <td>DDD</td>
  </tr>
</table>

AAA	BBB
CCC	DDD

A small table with dashed grey border, solid green row border and a cell with dotted blue border.

Online Border CSS Generator

Border-collapse

The border-collapse CSS property defines whether the table and its cells borders should collapse into a single border or be separated. The border-spacing property has to be at least one pixel for this style to have any effect.

.myStyle {
border-collapse: collapse;
}

AAA	BBB
CCC	DDD

.myStyle {
border-collapse: separate;
border-spacing: 4px;
}

AAA	BBB
CCC	DDD

border-collapse – collapse / inherit / initial / revert / separate / unset

Border-spacing

Border spacing CSS property sets the space between the borders when the border-collapse style is set to "separate".

.myStyle {
border-collapse: separate;
border-spacing: 4px;
border: 4px solid green;
}
.myStyle td {
border: 4px solid grey;
}

AAA	BBB
CCC	DDD

border-collapse: collapse and border-spacing: 0 have the similar visual effect.

Vertical-align

Use the vertical-align CSS property to align the text vertically and text-align for horizontal alignment.

<table>
  <tr>
    <td><strong>vertical-<br>align</strong></td>
    <td style="vertical-align:top">top</td>
    <td style="vertical-align:middle">middle</td>
    <td style="vertical-align:bottom">bottom</td>
  </tr>
</table>

vertical-
align

top

middle

bottom

Aligning the text to the top, middle and bottom of the cell.

<table>
  <tr><td><strong>
    text-align&nbsp;CSS
  </strong></td></tr>
  <tr><td style="text-align:left">left</td></tr>
  <tr><td style="text-align:center">center</td></tr>
  <tr><td style="text-align:right">right</td></tr>
</table>

text-align CSS

left

center

right

Set the text to align to the left, center and right side of the cell

Table layout

We can change how the table lays out its content through the table-layout property. This property tells the browser how to arrange the cells in the table.

There are two possible values for this property: auto and fixed.

<table style="table-layout: auto;
              width: 300px">
  <tr>
    <td>Word</td>
    <td>LongerWord</td>
    <td>A_pretty_cool_long_word</td>
  </tr>
</table>

Word

LongerWord

A_pretty_cool_long_word

table-layout: auto - the cells are adjusting their width to fit their content. The table is wider than the defined 300 px to make room for the long word.

<table style="table-layout: fixed;
              width: 300px">
  <tr>
    <td>Word</td>
    <td>LongerWord</td>
    <td>A_pretty_cool_long_word</td>
  </tr>
</table>

Word

LongerWord

A_pretty_cool_long_word

table-layout: fixed - Every cell is 100 pixels wide and the long word is sticking out.

auto – is the default value. The browser will adjust the width of each column based on the content inside it. For example, if one cell has a long word, like “antidisestablishmentarianism”, the column will be wider than the others. This way, the table will fit the content nicely, but it might take longer for the browser to calculate the widths.
fixed – the browser will use the width that you specify for the table or the first row of cells. For example, if you say that the table should be 300 pixels wide, and there are three columns, each column will be 100 pixels wide. This way, the table will load faster, but some content might not fit in the cells and get cut off.

Div Table CSS

div table generator The online table generator will help you to create div tables easily.

Switch to use <div> tags instead of <table> tags, then select the desired dimensions, optionally activate header and footer. Take the generated HTML code and use in your project. Make sure to include the CSS styles below to make the structured <div> tags behave like table rows and cells.

Learn more about div tables on its dedicated page.

.divTable { display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group; }
.divTableCell, .divTableHead { display: table-cell; }
.divTableHeading { display: table-header-group; }
.divTableFoot { display: table-footer-group; }
.divTableBody { display: table-row-group; }

<div class="divTable">
  <div class="divTableHeading">
    <div class="divTableRow">
      <div class="divTableHead">Head1</div>
      <div class="divTableHead">Head2</div>
    </div>
  </div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">AA</div>
      <div class="divTableCell">BB</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">CC</div>
      <div class="divTableCell">DD</div>
    </div>
  </div>
  <div class="divTableFoot tableFootStyle">
    <div class="divTableRow">
      <div class="divTableCell">Foot1</div>
      <div class="divTableCell">Foot2</div>
    </div>
  </div>
</div>

Head1

Head2

Foot1

Foot2

How to Use the Online HTML Table Styler

The HTML table generator and CSS style generator below will help you set up the perfect table for your project very quickly.