Как выровнять текст в таблице html
Перейти к содержимому

Как выровнять текст в таблице html

  • автор:

Styling HTML tables

This article provides a guide to the fundamental styling options available for tables.


At times it seems that tables are a little misunderstood in modern web development. So much attention is given to “don’t use tables!” that people sometimes forget the issue is actually "don’t use tables for layout". Tables are excellent for their true purpose — displaying tabular data. So it makes sense to know how to style them properly.

This article focuses on applying CSS in an efficient manner, to produce clear and readable data table styles. We’ll also cover some common design requests for tables.

Table structure

Before we dive into the CSS, let’s consider the key structural elements of tables you will need to style clearly:

  • Table headings
  • Table data cells
  • Table captions

When your site users read your table, they should be able to easily understand and follow the structure of the table. The most common way to do this is with borders, background colours, or both.

You do not have to follow these style conventions, however, you should ensure that there is some clear difference between th and td cells; also, the caption should be clearly associated with the table and differentiated from other text on the page.

The basics

Consider the way this unstyled table is rendered (this is the same example you met in HTML tables):

Recent Major Volcanic Eruptions in the Pacific Northwest

Volcano Name Location Last Major Eruption Type of Eruption
Compiled in 2008 by Ms Jen
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt. St. Helens Washington 1980 Explosive Eruption

The data is understandable, but it does takes some effort to work out what’s happening. Let’s add some style to make it easier to read.

Table and cell width

The first decision is how wide to make the table. The browser default is the same as setting table < width: auto; >, which results in the table extending to the width of the content. This generally looks untidy.

Let’s imagine that our table is going into a content column 600px wide. Let’s set the table to expand to 100% of the available width, to make best use of space. Since there are four columns, let’s also set the width of the table cells to an equal 25% each:

You can actually just set the width on th and it will set the width of all the columns; however, it doesn’t hurt to be thorough. This simple style will produce the result seen in Figure 1:

Figure 1: The example table with simple width settings.

The cells are now sitting at an even width. We’ll look at setting uneven widths later, but for now let’s push on.

Text alignment

The table is still a bit confusing to read, so let’s set up the text alignment to be a little neater — the additional rule below will left-align the headers to match the content (by default, browsers centre table headings):

This neatens things up a little, as you can see in Figure 2:

Figure 2: Table with left alignment applied.

Currently all of the cells are vertically aligned to the centre. If you prefer, you can set this to align text to the top or bottom of the cell, or in fact any vertical-align setting that you like. The new rules below set the text to align to the top:

The table now looks like Figure 3:

Figure 3: Table with vertical alignment added.

Note how the top row of headings all sit at the top, even though “Last Major Eruption” wraps on to two lines.


The table is looking a little nicer, however it is still a bit hard to read along each line. It’s time to set some borders to make things easier to read. You need to set borders separately for each part of the table, then decide how those borders should combine.

To show where the borders will be set, Figure 4a shows different borders for table ( solid black ), caption ( solid grey ), th ( dashed blue ) and td ( dotted red ):

Figure 4a: illustration of the different element borders within a table.

Note how the table border runs around the outside of all the heading and data cells, then between the cells and the caption. You can also see that by default, the th and td borders are spaced out from each other.

Let’s look at a different style of table — you can set up a simple black border for the table and cells, using the border property — this is done via the new rules below:

Which produces the result seen in Figure 4b:

Figure 4b: Table with simple black borders applied.

This makes the rows far easier to read, however you may not like the spacing between the cells. There are two ways to change this.

First, you can simply close the gaps using the border-spacing property, like so:

This will make the borders touch together instead of sitting apart. This changes the 1px border into a 2px border, as seen in Figure 5:

Figure 5: Table with border spacing removed, producing a 2px border effect.

You can also increase the space between cells using border-spacing , although bear in mind that this property doesn’t work in Internet Explorer.

If you want to retain the 1px border effect, you’ll need to set the table so that the borders “collapse” into each other. You can do this using the border-collapse property instead of the border-spacing property:

This will produce a table with a 1px border, like in Figure 6:

Figure 6: Table with border-collapse set to collapse, reducing the border to 1px.

When you set borders to collapse, you need to keep in mind that this can cause issues if you have different border styles applied to adjacent cells. When the different border styles are collapsed into each other, they will “conflict” with each other. This is resolved according to the W3C CSS2 Table border conflict resolution rules, which determine which style “wins” when they are collapsed.


Now that you have borders on the cells, you might like to add some whitespace to the caption and table cells. You simply use padding to accomplish this:

This allows the text to “breathe” a little, as seen in Figure 7:

Figure 7: Table with padding applied to all cells.

Caption placement

So far the caption has been left sitting at the top of the table. However, you might like to move the caption somewhere else. Unfortunately you cannot do this in IE, but for all other browsers you can change the position of the caption using the caption-side property. The options are top, bottom, left and right. Let’s move the caption to the bottom:

Figure 8 shows the result.

Figure 8: Table with caption moved to the bottom of the table.

If you do want move the caption, remember that any side-specific styles will not work in IE. For example if you add three borders to make the caption “join” the bottom of the table, it won’t have the desired effect in IE because the caption will still be at the top. You will need to use conditional comments to re-style your table for IE. See also the Fixing IE with conditional styles specification section for more details.

For the rest of the examples, we will leave it at the top.


Another simple way to style tables is to add background colours and images. This is done with the background property, although you need to be aware that the different parts of the table will “layer” over each other. The CSS2 specification explains background layering in some detail however the short version is that backgrounds will override each other in the following order:

  1. table (which sits at the “bottom” or the “back”)
  2. column groups
  3. columns
  4. row groups
  5. rows
  6. cells (“top” or "front", meaning their background overrides all the others)

So, if you set a background for the table, and a different colour for cells, the cell background will cover up the table background. If you have borders set to collapse , the table background won’t show at all. If you set border-collapse to separate , however, the table background will show through between the borders.

Note that the concept of different elements sitting on top of one another on the page is controllable; you can control how high or low in the stack an element sits in relation to other elements by changing its z-index property.

Imagine you set the table to have a red background and cells to have a white background. Separated cells will show the red, but the cells stay white, as demonstrated by Figure 9:

Figure 9: Table demonstrating the red table element background showing between the white backgrounds of the cell elements.

You can also use a background image. For example, if you wanted to have a gradient showing through between the cells, you could set the th and td cells to white backgrounds, but set the table background to a gradient:

Note that the background colour is set to black, which will fill up the space at the top where the gradient graphic finishes (you should always allow for your table being taller than the background image). The foreground colour is set to white, in case these default colours ever show through to the cell content. In general, the cell styles will override the text colour settings from the table <> style, but you should always declare contrasting foreground and background colours at each level.

These styles produce a table which would look like Figure 10 in most browsers:

Figure 10: Table demonstrating a gradient background image showing through between the cells.

By default IE won’t show as much of the background, since it doesn’t support border-spacing . However you will still get the same general effect, as indicated by Figure 11.

Figure 11: The smaller border-spacing gap rendered by IE.

Depending on your circumstances, you may be happy to simply accept this different rendering between browsers. Of course that isn’t always an option, for example when a client particularly wants a design to look exactly the same in all browsers.

Fixing IE with conditional styles

There is a workaround for the IE problems listed above. It requires a hack and an extra stylesheet, but it works. You can use an expression to produce the wider gap, then load that expression using conditional comments. The expression syntax is:

This CSS is only useful to IE, so you only want IE to apply it. The expression will also invalidate your stylesheet, so many developers prefer to isolate IE hacks in a separate stylesheet only loaded by IE.

To do this, create a new stylesheet named ie-only.css and link it within conditional comments:

Note the [if lte IE 7] means "if less than or equal to IE version 7". This reveals the code to IE7 and all earlier versions of IE, while the surrounding HTML comment hides the code from all other browsers. You can adjust this to whichever version of IE you need to target, for example to target IE6 and earlier use [if IE 6] .

In your main stylesheet, set the normal style:

Then set your IE-only style in ie-only.css :

This will get IE to produce a table with wide cell spacing. You just have to remember to maintain the extra width settings — if you update your main stylesheet, you will have to update ie-only.css as well. Obviously conditional comments allow you to do a lot more than just style tables, since the extra stylesheet can contain as much CSS as you need to fix IE bugs.

A simple design

Most designs use relatively simple combinations of backgrounds. Let’s give the table headers a grey background, and change the caption to be white text on black:

This looks like Figure 12:

Figure 12: Table with reversed white-on-black caption and light grey background applied to the table heading cells.

Common variations

In this section I will look at some common design archetypes you will see again and again in tables across the Web.

Zebra striping

A common design request for tables is to create rows with alternating colours. These are commonly referred to as "zebra striping". Although there is some conjecture as to whether zebra striping actually helps the reader, they are a popular style. Figure 13 shows an example:

Figure 13: A table with "zebra stripes", alternate rows set to white or light grey.

The simplest way to accomplish zebra stripes is to add a class to alternate table rows, then use a contextual CSS selector to style the cells in those rows. First, the classes “odd” and “even” are added to the table rows, like so:

You can skip the heading row as it already has its own style. You then add a contextual class to set the background for all cells inside odd class rows:

This is the simplest way to add zebra striping to an HTML table that will work across all browsers, but it is not perfect — what if you add a row to the table? You’d then need to move all your odd and even class names around to get everything looking right again.

There are two other options:

  • You can add the classes using unobtrusive JavaScript, as demonstrated in A List Apart: Zebra Tables. Most JavaScript frameworks have a suitable method, too: Zebra Table Showdown compares a range of framework implementations.
  • You can use the CSS3 :nth-child selector, however, this isn’t supported across all the major browsers yet. Support will improve as time goes on though. You can find more out about zebra striping with nth-child in this dev.opera.com article.

Incomplete grids

Some designs will respond well to less structured, more open-looking grids. A simple variation is to remove the vertical borders and leave out the background fill on the caption, as seen in Figure 14:

Figure 14: A table with lighter grey borders only on the outer edge and bottom of each cell.

The CSS for this effect is:

You can take this a step further and remove all of the borders, except a top and bottom border to give some definition to the table body — see Figure 15:

Figure 15: A table with borders applied only to the top and bottom of the table body.

The CSS for this effect is:

Inner grids

Sometimes you will want to remove the outer border, but keep the inner grid of borders, like in Figure 16:

Figure 16: A table with an inner grid design.

To accomplish this for all current browsers, you need to add a class to the th and td cells that appear last on each row, like this:

Then we use that class to remove the right border from those cells. The full CSS is:

Inner grids using :last-child

When browser support improves, we will be able to use the pseudo selector :last-child to achieve this effect without classes. The CSS would be:

This currently works in the latest versions of Opera, Firefox and Safari.

Two common bugs

In this last section we’ll cover two really common bugs, so you’re prepared for when they crop up. They concern borders and captions.

border-collapse bug

When you set your table to border-collapse: collapse; you will find that Firefox and Safari will incorrectly display the width of table features. For example, if you set a 1px border on the table, cells and caption, Firefox will render the caption 1px too narrow on the left, as seen in Figure 17:

Figure 17: The border-collapse bug affects Firefox and Safari.

Safari does the same thing, just on the right. This bug is all based on a rounding issue that ultimately comes down to how you display "0.5 of a pixel". It can be argued that this is not a bug per se, but the browsers don’t agree, so it’s effectively a bug.

So what’s the solution? If you want to use a 1px border and a caption background, there really isn’t a fix other than to "live with it ". It is a very minor difference and a non-fatal problem — that is, the table remains entirely usable. So, many people choose to just live with the differences between browsers. Let the Web be the Web.

If you are happy to use a larger border, say 2px, then you can simply set a 1px border on table, cells and caption; then set table to separate borders and apply zero spacing between them:

In Firefox at least, the 1px borders will add up to the desired 2px rendered border, avoiding the rounding problem on the way. Safari still leaves a gap.

Alternatively, you can hide the problem by not using a border or background colour on your caption. The problem is still there; you just won’t see it. This is probably the simplest and most effective solution.

Margin/caption bug

If you use a caption and set a margin on table , you need to be aware that Firefox and Safari may place the table margin between the table cells and the caption.

To combat this in Firefox, you can set the margin on three sides of table , set the caption-side explicitly, then add the fourth margin to the caption . Unfortunately, this solution will invoke the bug in Safari. So, this isn’t really a fix unless you are willing to live with the bug in either Firefox or Safari.

The only way to avoid a problem in both Firefox and Safari is to set a zero margin on the side with the caption. For example, if your caption is at the top you could just set your margin on the right, bottom and left sides; or just the bottom. This may work if you set all of your margins on the same side of content elements, so the margin isn’t required to space the table from adjacent content.

Отступы и выравнивание в ячейках таблицы HTML

Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:

Продолжаю рассказывать о таблицах в HTML и сегодня об одном из наиболее часто встречающемся вопросе — о том, как выровнять текст в ячейке таблицы и как сделать отступы между текстом и границами ячейки.

Если вы создадите простую таблицу, как это мы делали здесь, то она будет не очень красивой — текст будет расположен очень близко к границам ячеек. И это будет особенно неприятно, если границы таблицы не прорисованы — тогда получится, что текст в разных ячейках просто сольётся в один сплошной.

Этого можно избежать, если использовать определённые атрибуты таблицы: cellpadding и cellspacing .

Кроме того, часто требуется выровнять текст в ячейке по той или иной границе (по умолчанию текст выравнивается по левому краю по горизонтали и по середине по вертикали). Выровнять текст можно с помощью атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание, поддерживается не всеми браузерами). Пример:

В комментариях имеются некоторые пояснения. Ну а вообще здесь разъяснять особо нечего. Разве что стоит упомянуть про атрибуты width и height , которые задают ширину и высоту таблицы соответственно для того, чтобы мы могли чётко увидеть, как работает выравнивание в ячейках.

Вот так примерно эта таблица будет выглядеть на экране:

Выравнивание в ячейках таблицы HTML

А теперь про отступы в ячейках и от границ таблицы. В примере выше нам пришлось использовать атрибуты width и height , потому что без этого ячейки были бы расположены вплотную друг к другу, а текст в ячейках также был бы вплотную к границам ячеек. И мы не смогли бы увидеть работу атрибутов выравнивания текста.

Чтобы устранить эту неприятность, а также сделать таблицу более красивой, где текст в разных ячейках не сливается в одну строку, можно использовать следующие атрибуты:

  • cellpadding — задаёт отступ от границы ячейки до текста
  • cellspacing — задаёт отступ между ячейками и от ячеек до границы таблицы

Чтобы лучше понять, как это работает, посмотрите рисунок:

Отступы в ячейках таблицы HTML

Для лучшего понимания посмотрите видео (выше) и изучите курс о вёрстке сайтов.

Выравнивание элементов

За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание изображений, текста, полей формы и других элементов относительно друг друга и веб-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.

Центрирование по вертикали

Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).

Пример 1. Центрирование рисунка

В данном примере выравнивание по горизонтали устанавливается с помощью параметра align="center" тега <td> , а по вертикали содержимое ячейки можно не центрировать, поскольку это положение задано по умолчанию.

Чтобы высота таблицы устанавливалась как 100%, необходимо убрать <!DOCTYPE> , код при этом перестает быть валидным.

Использование ширины и высоты на всю доступную область веб-страницы гарантирует, что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо от его размеров.

Выравнивание по горизонтали

За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега <td> , допустимо устанавливать несколько видов положений элементов относительно друг друга. На рис. 1 показаны способы выравнивания элементов по горизонтали.

Рис. 1. Выравнивание элементов по горизонтали

Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.

Выравнивание по верхнему краю

Для указания выравнивания содержимого ячеек по верхнему краю, для тега <td> требуется установить атрибут valign со значением top (пример 2).

Пример 2. Использование valign

В данном примере характеристики ячеек управляются с помощью параметров тега <td> , но тоже удобнее изменять через стили. В частности, выравнивание в ячейках указывается свойствами vertical-align и text-align (пример 3).

Пример 3. Применение стилей для выравнивания

Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.

Выравнивание по нижнему краю делается аналогично, только вместо значения top используется bottom .

Выравнивание по центру

По умолчанию содержимое ячейки выравнивается по центру их вертикали, поэтому в случае разной высоты колонок требуется задавать выравнивание по верхнему краю. Иногда все-таки нужно оставить исходный способ выравнивания, например, при размещении формул, как показано на рис. 2.

Рис. 2. Добавление формулы в документ

Рис. 2. Добавление формулы в документ

В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.

Пример 4. Выравнивание формулы

В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для создания отступа, который, кстати, может быть установлен и с помощью стилей.

Выравнивание элементов формы

С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с текстом. Один из вариантов оформления формы, которая предназначена для ввода комментария, показан на рис. 3.

Рис 3. Расположение полей формы и текста

Рис 3. Расположение полей формы и текста

Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).

Пример 5. Выравнивание полей формы

В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен атрибут align="right" . Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью атрибута valign .

How to center the contents of an HTML table?

I am using an HTML <table> and I want to align the text of <td> to the center in each cell.

How do I center align the text horizontally and vertically?

TylerH's user avatar

9 Answers 9

Here is an example with CSS and inline style attributes:

EDIT: The valign attribute is deprecated in HTML5 and should not be used.

The CSS to center text in your td elements is

HTML in line styling example:

CSS file example:

Try to put this in your CSS file.

Boris's user avatar

Is the only correct answer imho, since you’re working with tables which is old functionality most common used for e-mail formatting. So your best bet is to not use just style but inline style and known table tags.

Remi's user avatar

If you are using Bootstrap, you can use inbuilt class

MohitGhodasara's user avatar

The following worked for me to vertically align content (multi-line) in a list-table

Using theme overrides .css option I defined:

In the theme that I use ‘python-docs-theme’, the cell entry is defined as ‘stub’ class. Use your browser development menu to inspect what your theme class is for cell content and update that accordingly.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *