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

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

Свойство text-align предназначено для горизонтального выравнивания ( по левому и правому краю, по центру ) содержимого элементов

По умолчанию, содержимое элементов

В приведенном ниже примере оформления таблицы CSS к содержимому элементов

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

Свойство vertical-align предназначено для вертикального выравнивания ( по верхней и нижней границе, а также посередине ) содержимого внутри элементов

По умолчанию, содержимое

В приведенном ниже примере к содержимому элементов

Поля таблицы

Для регулирования расстояния между границей элемента и его содержимым воспользуйтесь свойством padding ( для элементов

Горизонтальные разделители

Можно использовать свойство border-bottom в элементах

Таблица с hover-эффектом

Воспользуйтесь селектором :hover в элементе

Полосатая таблица

Чтобы получить CSS таблицы со строками разного цвета, используйте селектор nth-child() , и задайте всем четным и нечетным строкам разный цвет.

Цвет таблицы

В приведенном ниже примере показано, как задавать цвет фона и текста для элементов

Адаптивная таблица

Адаптивная таблица CSS будет показывать горизонтальный скроллинг, если окажется слишком большой для страницы или экрана.

с заданным свойством overflow-x: auto для элемента

Создаем причудливую таблицу

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

Выставляем расположение подписи таблицы

В данном примере показано, как можно расположить подпись к таблице при помощи CSS .

Данная публикация представляет собой перевод статьи « CSS Tables » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

Цвет фона ячеек

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору TABLE . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с TABLE задать цвет у селектора TD или TH , то он и будет установлен в качестве фона (пример 1).

Пример 1. Цвет фона

В данном примере получим синий цвет фона у ячеек (тег

То же самое происходит и с цветом текста. Для всех элементов таблицы в примере он установлен белым.

Результат данного примера показан на рис. 1.

Рис. 1. Изменение цвета фона

Поля внутри ячеек

Полем называется расстояние между краем содержимого ячейки и ее границей. Обычно для этой цели применяется атрибут cellpadding тега

Пример 2. Поля в таблицах

В данном примере с помощью группирования селектором поля установлены одновременно для селектора TD и TH .

Результат данного примера показан на рис. 2.

Рис. 2. Поля в ячейках

Если применяется стилевое свойство padding для ячеек таблицы, то действие атрибута cellpadding тега

Границы и рамки

Линии между ячейками можно установить несколькими методами, при этом рассмотрим два из них, которые непосредственно связаны со стилями.

Использование атрибута cellspacing

Известно, что атрибут cellspacing тега

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

Применение свойства border

Стилевое свойство border одновременно задает цвет границы, ее стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать его производные — border-left , border-right , border-top и border-bottom , они соответственно определяют границу слева, справа, сверху и снизу.

Применяя свойство border к селектору TABLE , мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек (пример 3).

Пример 3. Добавление двойной рамки

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

Результат примера показан на рис. 3.

Рис. 3. Граница вокруг таблицы и ячеек

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

Пример 4. Создание одинарной рамки

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

Результат примера показан на рис. 4.

Рис. 4. Граница вокруг таблицы

При добавлении border-collapse: collapse значение атрибута cellspacing тега

Выравнивание содержимого ячеек

По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег

Пример 5. Выравнивание содержимого ячеек по горизонтали

В данном примере содержимое тега

Рис. 5. Выравнивание текста в ячейках

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

Пример 6. Выравнивание содержимого ячеек по вертикали

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

css — Вертикальное выравнивание ячейки таблицы не работает

Вы можете выровнять плавающий элемент по вертикали так, чтобы это работало на IE 6+. Он также не нуждается в полной разметке таблицы. Этот метод не совсем чистый — он включает в себя обертки и есть несколько вещей, о которых нужно знать, например: если у вас слишком много текста, превышающего контейнер — но это довольно хорошо.

Краткий ответ: Вам просто нужно применить display: table-cell к элементу внутри плавающего элемента (ячейки таблицы не не использовать) и использовать запасной вариант с position: absolute и top для старого IE.

Длинный ответ: Вот jsfiddle, показывающий основы . Важные вещи суммированы (с условным комментарием, добавляющим класс .old-ie):

    .wrap {
        float: left;
        height: 100px; /* any fixed amount */
    }
    .wrap2 {
        height: inherit;
    }
    .content {
        display: table-cell;
        height: inherit;
        vertical-align: middle;
    }

    .old-ie .wrap{
        position: relative;
    }
    .old-ie .wrap2 {
        position: absolute;
        top: 50%;
    }
    .old-ie .content {
        position: relative;
        top: -50%;
        display: block;
    }

Вот jsfiddle, который намеренно выделяет мелкие ошибки с помощью этого метода. Обратите внимание, как:

• В стандартных браузерах содержимое, превышающее высоту элемента оболочки, перестает центрироваться и начинает спускаться по странице. Это не большая проблема (вероятно, выглядит лучше, чем ползти вверх по странице), и ее можно избежать, избегая слишком большого контента (обратите внимание, что, если я что-то не заметил, методы переполнения, такие как overflow: auto;, не работают)
• В старом IE элемент содержимого не растягивается, чтобы заполнить доступное пространство — высота — это высота содержимого, а не контейнера.

Это довольно незначительные ограничения, но о них стоит знать.

Код и идея адаптированы отсюда

Выравнивание таблицы по центру. HTML выравнивание по центру. Центрирование по вертикали

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

Основные тонкости

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

Как сделать саму таблицу по центру

Чаще всего нужно оформить таблицу по центру страницы, хотя изначально она прижата к левой стороне страницы. Для того чтобы выровнять её по центру, нужно задать ей свойство margin со значением auto.

Это приводит к тому, что отступы таблицы вычисляются автоматически. После этого таблица будет находиться по центру страницы.

Выравнивание по центру в ячейках

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

определяют заголовок HTML таблицы
.

HTML таблица по центру, с левой, с правой стороны

Горизонтальное расположение HTML таблицы
внутри web-страницы:

В примере выше показаны три отдельные таблицы
, каждая из которых состоит из одной ячейки. bgcolor — HTML
атрибут — определяет цвет фона. В предыдущем уроке мы использовали его CSS
аналог — background-color .

HTML таблица расположена внутри ячейки

Внутри второй ячейки находится еще одна таблица
со своими атрибутами, значениями и стилями.

Размеры и фон внутренней таблицы
, в отличае от внешней, заданы с помошью CSS
.

html — Выровнять содержимое по центру ячейки, но сохранить выравнивание текста по левому краю

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

Пример текущего сценария: http://jsfiddle.net/AygnN/

2

munkee

1 Окт 2012 в 19:09

2 ответа

Лучший ответ

<table>
  <tbody>
    <tr>
      <th>Departments</th>
      <th>KPI Types</th>
      <th>Bonus</th>
    </tr>
    <tr>
      <td>
        <ul>
          <li>dfgsdgfdfg</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>sdfgsdfgsdfg</li>  
        </ul>
      </td>
      <td>
        <ul>
          <li>sdgsdfgsdffgsdgf</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

Если у вас есть теги <h2> в качестве заголовков столбцов, вы должны использовать фактические заголовки таблиц (теги <th>). Теперь в CSS вы можете сказать:

th { text-align:center; }

РЕДАКТИРОВАТЬ:

#sub-content td{ padding:0px 60px; }

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

Этот метод гораздо более стандартный.

JSFiddle

1

Sivvy
2 Окт 2012 в 21:05

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

Пример, который вы привели, делает то же самое. Он скорее делит ячейку на несколько ячеек и помещает текст в среднюю.

0

Murtuza Kabul
1 Окт 2012 в 15:13

тег автоматически вызывает выравнивание центра внутри ячейки таблицы?

Это немного странно, но в моей ячейке таблицы у меня есть маркерная точка, которая по какой-то странной причине заставляет текст выравниваться по центру ячейки, хотя у меня нет include text-align center или чего-то в этом роде. Честно говоря, все остальные столбцы таблицы, которые, кстати, не включают маркированные точки, выравниваются влево как обычно, но для столбца, который содержит маркированные точки, это приводит к выравниванию текста по центру, и я не знаю, почему это происходит.

Мой вопрос заключается в том, приводит ли тег <ul> к выравниванию текста по центру по умолчанию в ячейке таблицы или есть что-то, что каким-то образом противоречит тегу <ul> и, следовательно, выравнивает текст по центру?

Ниже приведена таблица (сокращенный код):

    <table cellpadding="0" cellspacing="0">
    <thead>
    <tr>
        <th>Image</th>
    </tr>
    </thead>
    </table>
    <div>
    <table cellpadding="0" cellspacing="0">
    <tbody>
        <?php
          foreach ($arrQuestionId as $key=>$question) {
        echo '<tr>'.PHP_EOL;
        echo '<td>'. ( ( empty ($arrImageFile[$key]) ) ? "&nbsp;" : '<ul><li>'.htmlspecialchars( is_array( $arrImageFile[$key] ) ? implode(",", $arrImageFile[$key]) : $arrImageFile[$key] ) ). '</li></ul></td>' . PHP_EOL;

        echo '</tr>'.PHP_EOL;
        }
?>
    </tbody>
    </table>

Ниже приведен css, который включает в себя css для таблицы:

.imagetd{
    font-size:75%;  
}


.qandaul{
    list-style-type:square;
}

#tableqanda_onthefly_container
{
    width:100%;
    overflow-y: auto;
    overflow-x: hidden;
    max-height:500px;
}

#tableqanda_onthefly
{
    width:100%;
    overflow:auto;
    clear:both;
}

#tableqanda_onthefly td
{
    border:1px black solid;
    border-collapse:collapse;
}

#tableqanda, #tableqanda_onthefly{
    border:1px black solid;
    border-collapse:collapse;
    table-layout:fixed;
    word-wrap:break-word;
}       

#tableqanda{
    width:100%;
    margin-left:0;
    float:left;
}

#tableqanda td { 
    vertical-align: middle;
    border:1px black solid;
    border-collapse:collapse;
}

#tableqanda th{
    border:1px black solid;
    border-collapse:collapse;
    text-align:center;
}

.tableqandarow{
    border:1px black solid;
    border-collapse:collapse;
}

html

css

Поделиться

Источник

user1881090    

22 января 2013 в 03:34

4 ответа

• Как получить тег anchor для заполнения ширины ячейки таблицы?

  У меня есть ячейка таблицы с тегом anchor, и я хочу, чтобы ширина (и высота) тега anchor заполняла ширину содержащей ее ячейки таблицы. Интуиция, похоже, на это не действует. Пожалуйста, помогите. HTML: <table> <tr> <td class=width_is_100px> <a…

• Перезапись img вертикальное выравнивание внутри ячейки таблицы (Chrome)

  Мне нужно иметь возможность перезаписать вертикальное выравнивание для изображения внутри тега td, который имеет определенное вертикальное выравнивание. Я попытался дать изображению вертикальное выравнивание: середина, и хотя это работает в ff, изображение все еще падает ниже линии в chrome. html…

0

приводит ли тег <ul> к выравниванию текста по центру по умолчанию в ячейке таблицы?

Нет, тег UL добавляет левое поле, что может привести к тому, что элементы списка будут отображаться по центру.

есть ли что-то, что каким-то образом противоречит тегу <ul> и, следовательно, выравнивает текст по центру?

Возможно, так оно и есть. Проверьте стили, примененные к <ul> , с помощью инспектора html/css.

Поделиться

Samuel Liew    

22 января 2013 в 03:44

0

The <ul> tag adds left margin, in the table cell. 

Поделиться

rizon    

22 января 2013 в 03:48

0

Тег ul автоматически добавляет 40 пикселей левого отступа. Установка отступа на 0 должна решить вашу проблему.

Поделиться

symlink    

22 января 2013 в 03:56

0

Из-за распространенных в браузерах значений по умолчанию элемент ul обычно отображается с отступом. Это может зависеть от различных свойств CSS в разных браузерах, поэтому для удаления отступа может потребоваться несколько объявлений CSS. Например, отступ может иметь место из-за левого отступа по умолчанию или из-за левого поля по умолчанию. Довольно безопасный подход заключается в следующем (при условии, что вы также хотите удалить вертикальное расстояние по умолчанию вокруг элемента):

ul, ul li { margin: 0; padding: 0; }
ul { margin-left: 1.3em; }

Второе правило заключается в том, чтобы зарезервировать место для пуль списка. Маркер появляется слева от содержимого элемента li , поэтому для него требуется некоторое пространство. Значение 1.3em имеет тенденцию давать сбалансированный внешний вид с примерно равным расстоянием слева и справа от пули.

Поделиться

Jukka K. Korpela    

22 января 2013 в 09:00

Похожие вопросы:

тег br внутри ячейки данных таблицы — td не визуализируется

Я использую тег br для отображения списка строк внутри ячейки таблицы. Но это не рендеринг новой строки, а отображение в виде строки тега. См. колонку 4, Я попробовал <BR>, <br/>,…

Почему display:inline-block внутри ячейки таблицы изменяет вертикальное выравнивание следующих ячеек

Проверьте это fiddle: http://jsfiddle.net/cu4u5xo5/2 / .tbl { display: table; width:100%; } .trow { display:table-row; } .ul { white-space: nowrap; } .col { display:table-cell; } .col1 {…

Вертикальное выравнивание элементов внутри UITableViewCell

Можно ли программно установить вертикальное выравнивание (середину) всех элементов внутри прототипной ячейки UITableView (UILabel, UIImageView)? Я хотел бы установить его на середину.

Как получить тег anchor для заполнения ширины ячейки таблицы?

У меня есть ячейка таблицы с тегом anchor, и я хочу, чтобы ширина (и высота) тега anchor заполняла ширину содержащей ее ячейки таблицы. Интуиция, похоже, на это не действует. Пожалуйста, помогите….

Перезапись img вертикальное выравнивание внутри ячейки таблицы (Chrome)

Мне нужно иметь возможность перезаписать вертикальное выравнивание для изображения внутри тега td, который имеет определенное вертикальное выравнивание. Я попытался дать изображению вертикальное…

Вертикальное выравнивание снизу для ссылки внутри ячейки таблицы

Можно ли поместить ссылку в нижнюю часть ячейки таблицы, не зная высоты ячейки таблицы? Вот fiddle, который я установил, иллюстрируя эту проблему: http://jsfiddle.net/77qG5/1/ я хотел бы, чтобы…

динамический центру выравнивание ul с css

я извлекаю данные из базы данных, которая печатает в формате ul li. поскольку данные разные, у нас может быть 2 элемента li или 10, кто знает. каков наилучший подход к центрированию ul или div,…

angular material 2 выравнивание центра заголовка таблицы

Если md-sort-header добавляется в md-header-cell в md-таблице, то это всегда выравнивание по левому краю. Как выровнять по центру ячейки заголовка, например name? <md-header-cell…

Полная кликабельная область и вертикальное выравнивание блочного элемента внутри ячейки таблицы

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

Показать весь вид таблицы внутри ячейки

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

Атрибут

HTML align — GeeksforGeeks

Атрибут HTML

Значения атрибутов:

• left: Устанавливает левое выравнивание по таблице.
• вправо: Устанавливает выравнивание по правому краю таблицы.
• center: Устанавливает выравнивание по центру стола.

Примечание: Атрибут

Вывод:

Поддерживаемые браузеры: Браузеры, поддерживаемые HTML

  <таблица>
  

  <стиль>. Первая строка {выравнивание текста: центр; }.вторая строка {выравнивание текста: вправо; }. третья строка {выравнивание текста: слева; }  
 
 
 Первый столбец 
 
 Второй столбец 
 
 Третий столбец 
 
 
 
 Первый столбец 
 
 Второй столбец 
 
 Третий столбец 
 
 
 
 Первый столбец 
 
 Второй столбец 
 
 Третий столбец 
 
 
  

 
     ...
   

 html, body {
   ширина: 100%;
}
стол {
   маржа: 0 авто;
} 

 .className {
   маржа - слева: авто;
   маржа - правая: авто;
} 

 

   …

 

 <таблица>
   

 <таблица>
   
       Имя 
       Фамилия 
       Телефон 
   
   
       Том 
       Гарри 
       87932 
   
   
       Сара 
       Дэвид 
       69123 
   
 

 P {
   текст - выровнять: по центру
}
h3 {
   текст - выровнять: по центру
} 

 

   
  Центрированное содержание  
 

 
 Что дает следующий результат.
 Если CSS в вашем шаблоне WordPress форматирует таблицы, вам также может потребоваться отредактировать шаблон стиля CSS, чтобы обеспечить центрирование таблиц. Вот несколько приемов форматирования, когда align = center не работает.
 Проверьте шаблон CSS на предмет форматирования таблицы, которое меняет таблицу. Если это так, попробуйте добавить margin: 0 auto; к форматированию таблицы CSS.
 Центрирование текста и изображений в таблице в WordPress 
 К сожалению, иногда данные в таблице не выстраиваются должным образом ни по вертикали, ни по горизонтали.Использование метода align = center в любом из тегов должно решить эту проблему для горизонтального центрирования слева направо.
 Чтобы выровнять данные в таблице по вертикали, используйте следующую технику.
 Добавьте следующий код стиля в теги td или tr
 
 
 
 
 
 Приведенные выше команды должны выравнивать данные в таблице по вертикали.
 Надеюсь, описанные выше приемы помогут вам центрировать текст и изображения в таблицах в WordPress.
  С тегами:  центральный стол • CSS • HTML • TD • TR
  Рубрика:  Учебники • Задачи веб-сайта
  Понравился пост?  Подпишитесь на мой RSS-канал и получайте больше!
 центрирующий стол в html с использованием css 
 Теперь, когда тег CENTER и  align = "center"  атрибут в теге TABLE объявлены устаревшими, как вы должны центрировать таблицы на своей веб-странице?
 Когда вы помещаете таблицу внутри веб-страницы, вы помещаете ее в элемент уровня блока, такой как BODY, P, BLOCKQUOTE или DIV.Вы можете центрировать таблицу внутри этого элемента с помощью поля : auto;  стиль. Это говорит браузеру, что поля со всех сторон таблицы должны быть одинаковыми. Это помещает стол в центр.
Если ваш сайт должен поддерживать этот старый веб-браузер, вам нужно будет продолжать использовать  align = "center"  или тег CENTER для центрирования таблиц.
 Метод 1 
 Чтобы центрировать таблицу, вам нужно установить поля, например:
 table.center {
    маржа слева: авто;
    маржа-право: авто;
  }
 
 А затем сделайте это:
 <таблица>
    ...
  
 

 body {text-align: center;}
 

 table # table1 {
    ширина: 70%;
    маржа слева: 15%;
    маржа-право: 15%;
  }
 

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

 table.center {
    ширина: 70%;
    маржа слева: 15%;
    маржа-право: 15%;
  }
 

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

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

 дел.container {
    ширина: 98%;
    маржа: 1%;
  }
  table # table1 {
    выравнивание текста: центр;
    маржа слева: авто;
    маржа-право: авто;
    ширина: 100 пикселей;
  }
  tr, td {выравнивание текста: слева;}
 

 

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