Текст центра в ячейке таблицы

Я не могу найти ответ на мою проблему. У меня есть таблица с двумя строками и двумя столбцами (например, код, показанный ниже), как централизовать выравнивание текста в определенных ячейках. Я хотел бы центрировать выравнивание текста в одной или двух ячейках - не во всех ячейках.

<div style="text-align: center;">
    <table style="margin: 0px auto;" border="0">
        <tbody>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
            </tr>
            <tr>
                <td>Cell 3</td>
                <td>Cell 4</td>
            </tr>
        </tbody>
    </table>
</div>

Ответ 1

Я бы рекомендовал использовать CSS для этого. Вы должны создать правило CSS для обеспечения центрирования, например:

.ui-helper-center {
    text-align: center;
}

Затем добавьте класс ui-helper-center к ячейкам таблицы, для которых вы хотите контролировать выравнивание:

<td class="ui-helper-center">Content</td>

РЕДАКТИРОВАТЬ. Поскольку этот ответ был принят, я чувствовал себя обязанным отредактировать части, которые вызвали пламенную войну в комментариях, а также не продвигать плохие и устаревшие практики.

См. ответ Gabe о том, как включить правило CSS в вашу страницу.

Ответ 2

Как насчет просто (обратите внимание, придумайте лучшее имя для имени класса, это просто пример):

.centerText{
   text-align: center;
}


<div>
   <table style="width:100%">
   <tbody>
   <tr>
      <td class="centerText">Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td class="centerText">Cell 3</td>
      <td>Cell 4</td>
    </tr>
    </tbody>
    </table>
</div>

Пример здесь

Вы можете поместить css в отдельный файл, который рекомендуется. В моем примере я создал файл с именем styles.css и поместил в него мои правила css. Затем включите его в html-документ в разделе <head> следующим образом:

<head>
    <link href="styles.css" rel="stylesheet" type="text/css">
</head>

Альтернатива, не создающая отдельный файл css, не рекомендуется вообще... Создайте блок <style> в <head> в документе html. Тогда просто разместите там свои правила.

<head>
 <style type="text/css">
   .centerText{
       text-align: center;
    }
 </style>
</head>