it-swarm.com.ru

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

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

<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>
35
Jack Stevens

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

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

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

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

[~ # ~] edit [~ # ~] : Так как этот ответ был принят, я чувствовал себя обязанным отредактировать части, которые вызвали пламенную войну в комментариях, а не продвигать плохие и устаревшие методы.

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

51
Cᴏʀʏ

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

.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>
6
Gabe