CSS Table Alignment

Next Page >>
CSS tutorial

CSS Tutorial » CSS Table Alignment

To align the contents of a cell in a table we use the text-align property which sets the horizontal alignment (such as left, right or center alignment of the cell) of the content in <th> or <td>.

By default, the contents of the <th> elements in the table are aligned to the center, and the contents of the <td> elements are left-aligned.

To center-align the content of <td> elements as well, use text-align: center:

We can add cell align CSS Style as:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS Style file as style.css

Internal CSS and HTML Syntax:

<html>
<style>
th, td { text-align: value; }
</style>
<body>
<table>
<tr>
<th>title_text</th> 
...
...
...
</tr>
<tr>
<td>content</td> 
...
...
...
</tr>
</table>
</body>
<html>

Note: use external CSS instead.

In this chapter we learn how to:
How do I left align a table in CSS?
How do I align my table?
How do I change the position of a table in CSS?
How do I align cell content in CSS?

How do you add width and height to a table in CSS?

ID	Nombre	Apellido	Email
1	Clark	Kent	clarkkent@mail.com
2	John	Carter	johncarter@mail.com
3	Peter	Parker	peterparker@mail.com

Browser Support CSS cell width and height

Element	Chrome	IE	Firefox	Opera	Safari
Browser Support option	Yes	Yes	Yes	Yes	Yes

CSS Table Align Center

To center a table, set margin-left: auto; and margin-right: auto;.

For a better understanding we present an example:

Example (this is HTML - PHP editor, change text, values on this window)

<!DOCTYPE html>

  <html>

  <head>

  <style>

  table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

  }

  

  table.center {

  margin-left: auto; 

  margin-right: auto;

  }

  h2 {

  color:blue;

  text-align: center;

  }

  </style>

  </head>

  <body>

  

  <h2>Table Align Center</h2>

  <table class="center">

  <tr>

  <th>ID</th>

  <th>Name</th>

  <th>Gender</th>

  <th>Age</th>

  </tr>

  

  <tr>

  <td>a1</td>

  <td>NickM</td>

  <td>M</td>

  <td>29</td>

  </tr>

  <tr>

  <td>a2</td>

  <td>SandyB</td>

  <td>F</td>

  <td>31</td>

  </tr>

  <tr>

  <td >a3</td>

  <td>StwartW</td>

  <td>M</td>

  <td>28</td>

  </tr>

  </table>
</body>

  </html>

Note: The table cannot be centered if the width is set in percentage as 100%

Tags: css table align center: horizontal, vertica, off page, cell, not working, of screen, table header align center

Vertical alignment: top, middle, bottom

Useing vertical-align:baseline/ sub/ super/ top/ middle/ bottom/ text-bottom/ text-top as needed. Change the alignment of elements with the vertical-alignment utilities.
Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.

Example (this is HTML - PHP editor, change text on this window)

<!DOCTYPE html>

  <html>

  <head>

  <style>

  table, td, th {

  border: 1px solid blue;

  }
table {

  border-collapse: collapse;

  width: 100%;

  

  }
td {

  height: 50px;

  vertical-align: bottom;

  }

  h2 {

  color:blue;
 }

  </style>

  </head>

  <body>

  

  <h2>The vertical-align Property</h2>
<p>This property vertical-align: sets the vertical alignment (as: top, bottom, middle) of the cell for th or td.</p>

  <table>

  <tr>

  <th>ID</th>

  <th>Name</th>

  <th>Gender</th>

  <th>Age</th>

  </tr>

  

  <tr>

  <td>a1</td>

  <td>NickM</td>

  <td>M</td>

  <td>29</td>

  </tr>

  <tr>

  <td>a2</td>

  <td>SandyB</td>

  <td>F</td>

  <td>31</td>

  </tr>

  <tr>

  <td >a3</td>

  <td>StwartW</td>

  <td>M</td>

  <td>28</td>

  </tr>

  </table>
</body>

  </html>

TAGS:css table cell vertical align, row vertical align, cell vertical align not worling, cell text, header, cell image

How do I align my table horizontal

How do I left align a table in CSS?
How do I align my table?
How do I change the position of a table in CSS?
How do I align cell content in CSS?
How to align table in center of page in html without css

The right align Property text-align

This property text-align: sets the horixontal alignment (as: left, right, center) of the cell for th or td.

Example (this is HTML - PHP editor, change text on this window)

<!DOCTYPE html>

  <html>

  <head>

  <style>

  table, td, th {

  border: 1px solid blue;

  }
table {

  border-collapse: collapse;

  width: 100%;

  

  }
td {

  height: 50px;

  text-align: right; 

  }

  h2 {

  color:blue;
 }

  </style>

  </head>

  <body>

  

  <h2>The right align Property text-align</h2>
<p>This property text-align: sets the horixontal alignment (as: left, right, center) of the cell for th or td.</p>

  <table>

  <tr>

  <th>ID</th>

  <th>Name</th>

  <th>Gender</th>

  <th>Age</th>

  </tr>

  

  <tr>

  <td>a1</td>

  <td>NickM</td>

  <td>M</td>

  <td>29</td>

  </tr>

  <tr>

  <td>a2</td>

  <td>SandyB</td>

  <td>F</td>

  <td>31</td>

  </tr>

  <tr>

  <td >a3</td>

  <td>StwartW</td>

  <td>M</td>

  <td>28</td>

  </tr>

  </table>
</body>

  </html>

css table align center, top, right, left, center horizontal, column right, columns, cell right, center of page, top of cell

css table align center: horizontal, vertica, off page, cell, not working, of screen, table header align center
CSS Table Alignment - css tutorial

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.