Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Как сделать таблицу по центру html: Как выровнять таблицу по центру окна браузера?

html — Как выровнять таблицу по центру?

Задать вопрос

Вопрос задан

Изменён 1 год 9 месяцев назад

Просмотрен 171 раз

HTML:

<table>
        <thead>
            <tr>
                <th><h5>Predictions</h5></th>
                <th><h5>Probability value</h5></th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <th>Both to score (yes)</th>
                <td>{{ predictions.both_score_yes }}</td>
            </tr>
            <tr>
                <th>Both to score (no)</th>
                <td>{{ predictions.
 
 both_score_no }}</td>
            </tr>
            <tr>
                <th>Over 2.5</th>
                <td>{{ predictions.over_25 }}</td>
            </tr>
            <tr>
                <th>Under 2.5</th>
                <td>{{ predictions.under_25 }}</td>
            </tr>
            <tr>
                <th>1X</th>
                <td>{{ predictions.1x_team1 }}</td>
            </tr>
            <tr>
                <th>X2</th>
                <td>{{ predictions.x2_team2 }}</td>
            </tr>
            <tr>
                <th>{{ predictions.name_team1 }} score</th>
                <td>{{ predictions.score_yes_team1 }}</td>
            </tr>
            <tr>
                <th>{{ predictions.name_team2 }} score</th>
                <td>{{ predictions.score_yes_team2 }}</td>
            </tr>
            <tr>
                <th>{{ predictions.
  name_team1 }} over 2.5</th>
                <td>{{ predictions.ind_total_over_25_team1 }}</td>
            </tr>
            <tr>
                <th>{{ predictions.name_team1 }} under 2.5</th>
                <td>{{ predictions.ind_total_under_25_team1 }}</td>
            </tr>
            <tr>
                <th>{{ predictions.name_team2 }} over 2.5</th>
                <td>{{ predictions.ind_total_over_25_team2 }}</td>
            </tr>
            <tr>
                <th>{{ predictions.name_team2 }} under 2.5</th>
                <td>{{ predictions.ind_total_under_25_team2 }}</td>
            </tr>
        </tbody>
    </table>

CSS:

.table {
    width: 500px;
    margin: 0;
}
.table td {
    text-align: center;
}

Почему то смещается влево

Как выровнять чтобы была по центру ?

  • html
  • css
  • bootstrap

почти так, только допиши здесь «margin: 0 auto;»

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

table — Выравнивание таблицы, HTML

Задать вопрос

Вопрос задан

Изменён 4 года 2 месяца назад

Просмотрен 69 раз

Есть таблица, на предпоследней строке 3 ячейки, на последней 2: фото. Подскажите пожалуйста, как мне сделать выравнивание последней строки по центру, но чтобы все формочки остались в левой части каждой из двух ячеек?

<table cellpadding="5">
  <tbody>
    <tr>
      <!-- таких 3 -->
      <td colspan=2>
        <form name="${dayName}" method="post">
          <input type="hidden" name="_method" value="put">
          <center><label><h5>${dayName}</h5></label></center>
          <br><label>Date <input type="date" name="date" required readonly value="${date}"></label>
          <br><label>Time <input type="time" name="time" required value="${time}"</label>
          <br><label>Subject
                <br><input type="text" name="subject" size="53" required value="${subject}">
            </label>
          <br><label>Message
                <br><textarea rows="12" cols="55" name="message" required>${text}</textarea>
            </label>
          <br>
          <center>
            <input type="hidden" name="_csrf" value="${_csrf.
  token}" />
            <button type="reset">Reset</button>
            <button type="submit">Submit</button>
            <br><br>
          </center>
        </form>
      </td>
    </tr>
    <tr>
      <!-- таких 2 -->
      <td colspan=3>
        <form name="${dayName}" method="post">
          <input type="hidden" name="_method" value="put">
          <center><label><h5>${dayName}</h5></label></center>
          <br><label>Date <input type="date" name="date" required readonly value="${date}"></label>
          <br><label>Time <input type="time" name="time" required value="${time}"</label>
          <br><label>Subject
                <br><input type="text" name="subject" size="53" required value="${subject}">
            </label>
          <br><label>Message
                <br><textarea rows="12" cols="55" name="message" required>${text}</textarea>
            </label>
          <br>
          <center>
            <input type="hidden" name="_csrf" value="${_csrf.
 
 
  token}" />
            <button type="reset">Reset</button>
            <button type="submit">Submit</button>
            <br><br>
          </center>
        </form>
      </td>
    </tr>
  </tbody>
</table>
  • html
  • table

1

А не легче через flexbox или display: inline-block, если нужна поддержка в IE? Просто таблицы — устаревшая и совершенно неподдающаяся адаптации на мобильных устройствах технология.

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Центрировать стол с помощью CSS

Старый способ центрирования таблицы был прост:

  <выравнивание таблицы="центр">
  . ..

Однако атрибут «align» устарел в пользу CSS (каскадных таблиц стилей), и это хорошо. Однако не так очевидно, как центрировать таблицу с помощью CSS.

Очевидным способом может показаться использование CSS «text-align: center;» где-то, может быть, как один из этих:

  <таблица>

ИЛИ

  <дел>
    <таблица>
      ...

ИЛИ, если вы совсем отчаялись,

  <тело>
    <таблица>
      ...

Ни один из них не будет работать. Сама таблица будет выровнена по левому краю, но все содержимое ячеек таблицы будет центрировано.

Почему? Поскольку text-align применяется к встроенному контенту, а не к блочному элементу, такому как table.

Способ 1

Чтобы центрировать таблицу, вам нужно установить поля, например:

  таблица.центр {
    поле слева: авто;
    поле справа: авто;
  }

А затем сделайте это:

  <таблица>
    . ..

В этот момент Mozilla и Opera отцентрируют вашу таблицу. Однако Internet Explorer 5.5 и более поздние версии также требуют, чтобы вы добавили это в свой CSS:

  тело {выравнивание текста: центр;}

Способ 2

Если вы хотите, чтобы ваша таблица имела определенную ширину в процентах, вы можете сделать это:

  таблица#таблица1 {
    ширина: 70%;
    поле слева: 15%;
    поле справа: 15%;
  }

И затем в вашем HTML/XHTML вы должны сделать это:

  <таблица>
    ...

Обратите внимание, что я использовал идентификатор для описания таблицы. Вы можете использовать идентификатор только один раз на странице. Если бы у вас было много таблиц на странице, которые вы хотели бы иметь одинаковой ширины и центрировать, вы бы сделали это в своем CSS:

  таблица.центр {
    ширина: 70%;
    поле слева: 15%;
    поле справа: 15%;
  }

И это в вашем HTML:

  <таблица>
    . ..
  
 
  <таблица>
    ...

Способ 3

Если вы хотите, чтобы ваша таблица была фиксированной ширины, определите свой CSS следующим образом:

  div.контейнер {
    ширина:98%;
    маржа: 1%;
  }
  таблица#таблица1 {
    выравнивание текста: по центру;
    поле слева: авто;
    поле справа: авто;
    ширина: 100 пикселей;
  }
  tr, td {выравнивание текста: по левому краю;}

Установите «ширину: 100 пикселей» на любую ширину, которая вам нужна.

«text-align: center» есть для Internet Explorer, который без него работать не будет. К сожалению, «text-align: center» будет центрировать весь текст внутри ячеек вашей таблицы, но мы противостоим этому, установив «tr» и «td» для выравнивания по левому краю.

В своем HTML вы должны сделать следующее:

  <дел>
    <таблица>
      ...

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

Выравнивание по центру HTML-таблицы –

спросил

Изменено 9несколько месяцев назад

Просмотрено 362k раз

На странице, над которой я сейчас работаю, я не могу центрировать таблицу с изображением в первой строке и двумя столбцами текста под ним (два столбца не должны быть больше, чем ширина изображения) Вот страница: http://www.puzzles-et-jeux.com/fr/page/minipuzzles.html Я потратил много времени, пытаясь решить эту проблему. Я хотел бы сохранить его в HTML, потому что мне нужно спешить, а также потому, что мне нужно создать 20 страниц с разной шириной/+ макетами для каждого изображения.

  • html
  • html-таблица
  • выравнивание

0

Для вашего дизайна обычной практикой является использование div, а не таблицы. Таким образом, ваш макет будет более удобным в сопровождении и изменчивым благодаря правильному стилю. К этому нужно привыкнуть, но в долгосрочной перспективе это очень поможет вам, и вы узнаете много нового о том, как работает стиль. Тем не менее, я предоставлю вам решение проблемы.

В ваших таблицах стилей поля и отступы установлены на 0 пикселей. Это переопределяет ваш атрибут align="center" . Я бы порекомендовал удалить эти настройки из вашего CSS, так как обычно вы не хотите, чтобы все ваши элементы были затронуты таким образом. Если вы уже знаете, что происходит в CSS, и хотите сохранить его таким, то вам нужно применить стиль к вашей таблице, чтобы переопределить предыдущие наборы. Вы можете либо присвоить таблице класс , либо поместить стиль в HTML. Вот два варианта:

  1. С классом:

    <таблица>

В вашем файле style.css будет что-то вроде этого:

 .centerTable { margin: 0px auto; }

  1. Встроенный в ваш HTML:

    <таблица>

Если вы решите стереть поля и отступы, установленные на 0 пикселей, вы можете оставить align="center" на своем тегов для любого столбца, который вы хотите выровнять.

Оставить комментарий

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

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