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

Leave a Comment / Html / By /

Содержание

html — Выравнять таблицу на всю высоту страницы и по центру

Доброго всем времени суток

// посностью рабочий HTML код
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
html, body { height:100%; margin:0px; padding:0px; }
</style>
</head>
<body>
<center>
<table>
<tr>
<td>
13423545345
</td>
</tr>
</table>
</center>
</body>
</html>

Тут мне захотелось добавить в верхнюю строку <!DOCTYPE html> получилось:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
html, body { height:100%; margin:0px; padding:0px; }
</style>
</head>
<body>
<center>
<table>
<tr>
<td>
13423545345
</td>
</tr>
</table>
</center>
</body>
</html>

И как всегда это бывает все поехало. Перестало работать растягивание страницы на всю высоту страницы. В чем дело? Тэг <center> и </center> мешает. Если его убрать — все работает, но проблема, таблица выровнена не по центру. Т.е. или одно или другое. Или высота 100% или выравнивание по центру.

Вопрос прост. Как совместить желаемое? Высота таблички должна быть 100%, и выравнивание по центру страницы.

P.s. Давно хотел задать вопрос уровня школьника но стеснялся. Даже обидно как то такое спрашивать. День пришел ))

  • html
  • css
<!DOCTYPE html>
<html>
<head>
<!-- не было title -->
<title>aaa</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<!-- не было type -->
<style type="text/css">
html, body { height:100%; margin:0px; padding:0px; }
</style>
</head>
<body>
<!-- center убрать, добавить margin:auto в table -->
<table>
<tr>
<td>
13423545345
</td>
</tr>
</table>
</body>
</html>

2

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

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

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

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

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

Почта

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

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

Почта

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

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

Справка:Таблицы — MediaWiki

Languages:

  • Bahasa Indonesia
  • Deutsch
  • English
  • Esperanto
  • Nederlands
  • Qaraqalpaqsha
  • Tiếng Việt
  • Türkçe
  • Yorùbá
  • Zazaki
  • català
  • dansk
  • español
  • français
  • italiano
  • norsk bokmål
  • polski
  • português
  • português do Brasil
  • română
  • slovenčina
  • srpskohrvatski / српскохрватски
  • suomi
  • svenska
  • čeština
  • русский
  • тоҷикӣ
  • українська
  • հայերեն
  • العربية
  • فارسی
  • ไทย
  • 中文
  • 日本語
  • 한국어
Примечание: Редактируя эту страницу, вы соглашаетесь на передачу своего вклада по лицензии CC0.

Подробнее — в проекте Помощь с общественным достоянием.
Запрос Таблицы перенаправляется сюда; информацию о структуре вики таблиц, смотрите Manual:Макет базы данных .

В вики-страницах могут быть созданы таблицы. Как правило, следует избегать создания таблиц, за исключением случаев, когда они действительно необходимы. Поскольку разметка таблиц усложняет редактирование страницы.[1]

Вики-разметка таблиц

{|начало таблицы, обязательное
|+заголовок таблицы, необязателен; может находиться только между началом таблицы и первой строкой таблицы
|-строка таблицы, в первой строке необязательно — вики-движок сам подставит первую строку
!ячейка заголовка таблицы, необязательно. Идущие подряд ячейки заголовка таблицы могут быть указаны в одной строке, разделённые двойным маркером (!!), или начинаться с новой строки с одиночным маркером (!).
|ячейка данных, необязательно. Идущие подряд ячейки данных могут быть указаны на одной строке, разделённые двойным маркером (||), или начинаться каждый с новой строки, предваряемые одиночным маркером (|).
|}конец таблицы, обязательное
  • вышеприведённые знаки должны начинаться с новой строки, кроме двойных || и !! для последовательных ячеек в строке. Тем не менее, пробелы в начале строки игнорируются.
  • атрибуты XHTML. Каждый знак разметки, кроме конца таблицы, может иметь при себе один или несколько атрибутов XHTML. Атрибуты должны быть на той же строке, что и знаки разметки. Атрибуты следует разделять друг от друга одиночным пробелом.
    • У ячеек и заголовка (| или ||, ! или !!, и |+) есть содержимое. Поэтому содержимое от атрибутов тэга нужно отделять вертикальной чертой (|). Содержимое может располагаться в той же строке или в следующих строках.
    • Маркеры таблицы и строк ({| и |-) напрямую не содержат контента. Не добавляйте разделитель в виде вертикальной черты (|) после их необязательных атрибутов. Если вы добавите его по ошибке к маркеру таблицы или строки, парсер удалит его
      и       атрибут может присоединиться к неверному маркеру.
  • Содержимое может располагаться (а) за знаком ячейки в той же строке после необязательных XHTML атрибутов или (б) на строках под знаком ячейки. Содержимое, использующее вики-разметку, которая должна сама начинаться с новой строки, например, списки, заголовки или вложенные таблицы, разумеется, должно начинаться с новой строки.
    • Вертикальная черта в качестве символа. Для того, чтобы вставить вертикальную черту (|) в качестве символа в таблицу, используйте разметку экранирования <nowiki><code>|</code></nowiki>.

Основы

Create a table with editor toolbar

In wikitext editor, place the caret where you want to insert a table. Then, in the toolbar, press “Дополнительно”, then choose Таблица button. A dialog opens.

From the dialog, you can choose whether to enable a table header row, to stylize the table with border and to make the table sortable. A preview example is displayed. You can also set row and column counts you need. Then, press “Вставить” button.

By default, the following code is generated:

Wikicode:
{|
|+ Текст подписи
|-
! Текст заголовка !! Текст заголовка !! Текст заголовка
|-
| Текст ячейки || Текст ячейки || Текст ячейки
|-
| Текст ячейки || Текст ячейки || Текст ячейки
|-
| Текст ячейки || Текст ячейки || Текст ячейки
|}

Результат:
Текст подписи
Текст заголовкаТекст заголовкаТекст заголовка
Текст ячейкиТекст ячейкиТекст ячейки
Текст ячейкиТекст ячейкиТекст ячейки
Текст ячейкиТекст ячейкиТекст ячейки

Minimal syntax

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

Вы вводитеВы получаете
{|
|Апельсин
|Яблоко
|-
|Хлеб
|Пирог
|-
|Масло
|Мороженое 
|}
АпельсинЯблоко
ХлебПирог
МаслоМороженое

Ячейки в одной строке могут быть размещены на одной линии, разделённые знаками || (два символа-разделителя). Если текст в ячейке должен содержать разрыв строки, используйте вместо разрыва ‎<br />.

Вы вводитеВы получаете
{|
|Апельсин||Яблоко||и т.д.
|-
|Хлеб||Пирог||и т.д.
|-
|Масло||Мороженое||и <br /> т. д.
|}
АпельсинЯблокои т.д.
ХлебПироги т.д.
МаслоМоро
женое		и
т.д.

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

Вы вводитеВы получаете
{|
|  Апельсин || Яблоко || и т.д.
|-
|   Хлеб || Булка || и т.д.
|-
|   Масло || Мороженое || и т.д.
|}
АпельсинЯблокои т.д.
ХлебПироги т.д.
МаслоМороженоеи т.д.

У вас также может быть более длинный текст или более сложное написание в ячейках таблицы:

Вы вводитеВы получаете
{|
|Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, 
sed diam voluptua. 
At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum
dolor sit amet. 
|
* Lorem ipsum dolor sit amet
* consetetur sadipscing elitr
* sed diam nonumy eirmod tempor invidunt
|}
Lorem ipsum dolor sit amet,

consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  • Lorem ipsum dolor sit amet
  • consetetur sadipscing elitr
  • sed diam nonumy eirmod tempor invidunt

Заголовки таблиц

Заголовки таблиц можно создать, используя «!» (восклицательный знак) вместо «|» (вертикальной черты). Заголовки по умолчанию показываются обычно жирными и отцентрированными.

Вы вводитеВы получаете
{|
!| Предмет
! Количество
! Цена
|-
|Апельсин
|10
|7.00
|-
|Хлеб
|4
|3.00
|-
|Масло
|1
|5.00
|-
!Всего
|
|15.00
|}
ПредметКоличествоЦена
Апельсин107.00
Хлеб43.00
Масло15. 00
Всего15.00

При использовании атрибутов, как в заголовке ‘Предмет’, нужна вертикальная черта ‘|’ для разделения. Но не восклицательный знак ‘!’.

Название таблицы

Над таблицей может быть размещено её название, как показано ниже.

Вы вводитеВы получаете
{|
|+Комплект продуктов
|-
|Апельсин
|Яблоко
|-
|Хлеб
|Пирог
|-
|Масло
|Мороженое 
|}
Комплект продуктов
АпельсинЯблоко
ХлебПирог
МаслоМороженое

class=»wikitable»

Основной стиль (светло-серый фон, границы, отступ и выравнивание слева) можно получить, добавив.

Вы вводитеВы получаете
{|
|+Комплект продуктов
|-
|Апельсин
|Яблоко
|-
|Хлеб
|Пирог
|-
|Масло
|Мороженое 
|}
Комплект продуктов
АпельсинЯблоко
ХлебПирог
МаслоМороженое

Атрибуты HTML

colspan и rowspan

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

Вы вводитеВы получаете
{|
!colspan="6"|Список покупок
|-
|rowspan="2"|Хлеб и масло
|Пирог
|Плюшки
|Слойка
|colspan="2"|Круассан
|-
|Сыр
|colspan="2"|Мороженое
|Масло
|Йогурт
|}
Список покупок
Хлеб и маслоПирогПлюшкиСлойкаКруассан
СырМороженоеМаслоЙогурт

Атрибуты XHTML

В таблицы вы можете добавлять атрибуты XHTML. В качестве официального источника по ним смотрите страницу спецификации W3C HTML-таблиц.

Атрибуты для таблиц

Помещая атрибуты после начального тэга таблицы ({|) применяет атрибуты ко всей таблице.

Вы вводитеВы получаете
{|
|Апельсин
|Яблоко
|12,333.00
|-
|Хлеб
|Пирог
|500. 00
|-
|Масло
|Мороженое
|1.00
|}
АпельсинЯблоко12,333.00
ХлебПирог500.00
МаслоМороженое1.00

Атрибуты для ячеек

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

Вы вводитеВы получаете
{|
| Апельсин
| Яблоко
| | 12,333.00
|-
| Хлеб
| Булка
| | 500.00
|-
| Масло
| Мороженое
| | 1.00
|}
АпельсинЯблоко12,333.00
ХлебПирог500.00
МаслоМороженое1.00

Также можно использовать атрибуты ячейки, когда вы размещаете несколько ячеек в одной строке. Обратите внимание, что ячейки разделены ||, а внутри каждой ячейки атрибут(ы) и значение разделены |.

Вы вводитеВы получаете
{|
| Апельсин || Яблоко     || | 12,333.00
|-
| Хлеб || Пирог       || | 500.00
|-
| Масло || Мороженое || | 1.00
|}
АпельсинЯблоко12,333.00
ХлебПирог500.00
МаслоМороженое1.00

Атрибуты для строк

Для строки тоже можно использовать атрибуты.

Вы вводитеВы получаете
{|
| Апельсин
| Яблоко
|| 12,333.00
|-
| Хлеб
| Пирог
|| 500.00
|-
| Масло
| Мороженое
|| 1.00
|}
АпельсинЯблоко12,333.00
ХлебПирог500.00
МаслоМороженое1.00

Атрибуты подписи и заголовков

Атрибуты можно добавлять в заголовки и названия как показано ниже.

Вы вводитеВы получаете
{|
|+|''Комплект продуктов''
|-
! | Фрукты
! | Жиры
|-
|Апельсин
|Масло
|-
|Груша
|Пирог
|-
|Яблоко
|Мороженое 
|}
Комплект продуктов
ФруктыЖиры
АпельсинМасло
ГрушаПирог
ЯблокоМороженое

Ширина границы

Если у атрибута «border-width:» только одно число, он применяется ко всем четырем сторонам границы:

Вы вводитеВы получаете
{|style="border-style: solid; border-width: 20px"
|
Привет
|}

Привет

Если у атрибута «border-width:» более одного числа, то четыре цифры соответствуют сверху, справа, снизу, слева (ЗАПОМНИТЕ этот порядок ↑→↓←):

Вы вводитеВы получаете
{|style="border-style: solid; border-width: 10px 20px 100px 0"
|
Привет
|}

Привет

Когда значений меньше 4х, то значение для левой границы соответствует значению для правой, значение для нижней границы соответствует значению для верхней, а значение для правой границы соответствует значению для верхней.
  • три значения, то есть top, right, bottom: тогда значением по умолчанию для left является значение right (второе значение). Для Width то же самое слева и справа.
  • два значения, то есть top, right: тогда значением по умолчанию для bottom является значение top (первое значение), а для left по умолчанию присваивается значение right (второе значение). Ширина сверху такая же, как и снизу; Ширина слева такая же, как справа.
  • одно значение, то есть top: тогда значением по умолчанию для right является значение top, и оно одинаково для bottom и left. Четвертая ширина одинакова и строит правильную границу. Это самый короткий вариант.

Другой метод задать ширину четырёх сторон ячейки — использовать атрибуты «border-left», «border-right», «border-top» и «border-bottom»:

Вы вводитеВы получаете
{|style="border-left:solid 10px black;border-right:solid 20px black;border-top:solid 30px black;border-bottom:solid 40px black;" align="center" 
|
Привет
|}

Привет

С HTML атрибутами и стилями CSS

Атрибуты стиля CSS можно использовать вместе с другими HTML атрибутами или отдельно.

Вы вводитеВы получаете
{| cellpadding="10"
|Апельсин
|Яблоко
|-
|Хлеб
|Пирог
|-
|Масло
|Мороженое 
|}
АпельсинЯблоко
ХлебПирог
МаслоМороженое

Padding

It represents the internal margin between the contents and the border of the cell.

Вы вводитеВы получаете
{|class=wikitable 
| | Пример
|-
| | Пример<br/><br/>Укажите отступ для '''КАЖДОЙ ЯЧЕЙКИ'''
|-
| | Пример
|}
Пример
Пример

Укажите отступ для КАЖДОЙ ЯЧЕЙКИ

Пример

Ширина столбца

Ширину столбца можно задать следующим образом:

Вы вводите:

{|
| colspan="2" | Ширина этого столбца составляет 85% ширины экрана
|-
|| '''Этот столбец составляет 30% из 85% ширины экрана'''
|| '''Этот столбец составляет 70% от 85% ширины экрана'''
|}

Вы получаете:

Ширина этого столбца составляет 85% ширины экрана
Этот столбец составляет 30% из 85% ширины экранаЭтот столбец составляет 70% от 85% ширины экрана

Доступность ячеек шапки таблицы

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

Однако, когда таблицы воспроизводятся на невизуальных медиа, вы можете помочь браузеру определить, к какой ячейки шапки таблицы применяется описание любой выделенной ячейки (для того, чтобы повторить её содержание с каким-нибудь помощником), использовав атрибуты scope=»row» или scope=»col» на ячейках шапки таблицы. В большинстве случаев с простыми таблицами вы будете использовать scope="col" на всех ячейках заголовка первой строки, и scope="row" на первой ячейке следующих строк:

Вы вводитеВы получаете
{|
|-
! scope="col"| Предмет
! scope="col"| Количество
! scope="col"| Стоимость
|-
! scope="row"| Хлеб
| 0.3 kg
| $0.65
|-
! scope="row"| Масло
| 0.125 kg
| $1.25
|-
! scope="row" colspan="2"| Всего
| $1.90
|}
ПредметКоличествоСтоимость
Хлеб0. 3 kg$0.65
Масло0.125 kg$1.25
Всего$1.90

Выравнивание

Выравнивание таблицы

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

Для примера, таблица с выравниванием по правому краю:

Вы вводитеВы получаете
{|
| Апельсин
| Яблоко
|-
| Хлеб
| Пирог
|-
| Масло
| Мороженое 
|}
АпельсинЯблоко
ХлебПирог
МаслоМороженое

И таблица с выравниванием по центру:

Вы вводитеВы получаете
{|
| Апельсин
| Яблоко
|-
| Хлеб
| Пирог
|-
| Масло
| Мороженое 
|}
АпельсинЯблоко
ХлебПирог
МаслоМороженое

Обтекание таблицы текстом

Если таблица выравнивается по правой или левой стороне страницы, текст, что идёт после таблицы, начинается в конце этой таблицы, оставляя пустое пространство вокруг таблицы. Вы можете сделать так, чтобы текст обтекал вокруг таблицы, заставляя таблицу как бы плавать вокруг текста, вместо простого её выравнивания. Это достигается за счёт использования CSS атрибута float, который может указать, где таблица будет иметь обтекание с левой или правой стороны. При использовании float, поля (margin) не управляют выравниванием таблицы и могут использоваться для указания расстояния между таблицей и окружающим текстом.

Вы вводитеВы получаете
{|
| Апельсин
| Яблоко
|-
| Хлеб
| Пирог
|-
| Масло
| Мороженое 
|}
Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi 
enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea 
commodo consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat, 
vel illum dolore eu feugiat nulla facilisis at vero 
eros et accumsan et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit augue duis dolore te 
feugait nulla facilisi.
АпельсинЯблоко
ХлебПирог
МаслоМороженое

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

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

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

Вы вводитеВы получаете
{|
|-
| | A
| | B
| | C
|-
| | D
| | E
| | F
|-
| | G
| | H
| | I
|}
ABC
DEF
GHI

Предостережения

Отрицательные числа

Если ячейка начинается с новой строки с отрицательного числа со знаком минус (или параметра, который оценивается как отрицательное число), это может поломать таблицу, потому что символы |- воспринимаются вики как начало новой строки в таблице, а не новой ячейки. Чтобы избежать такой проблемы, ставьте пробел перед минусом (| -6) или воспользуйтесь внутристроковой разметкой ячейки (||-6).

CSS по сравнению с атрибутами

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

Общие атрибуты столбцов, групп столбцов и групп строк

Синтаксис MediaWiki для таблиц на данный момент не предлагает поддержку общих атрибутов столбцов (тег HTML ‎<col />), групп столбцов (HTML тег ‎<colgroup>‎</colgroup>) и групп строк (HTML теги ‎<thead>‎</thead>, ‎<tbody>‎</tbody> и ‎<tfoot>‎</tfoot>). Указанные стандартные элементы HTML не принимаются даже с использованием синтаксиса HTML или XHTML.

Все строки и ячейки (шапки или данных) таблицы воспроизводятся внутри одной скрытой группе строк (HTML элемент ‎<tbody>‎</tbody>) без каких-либо атрибутов или стилей.

Таблицы и Визуальный Редактор (ВР)

Смотрите также: Справочная:Визуальный редактор/Руководство пользователя

Смотрите Phab: T108245: «Fully support basic table editing in the visual editor» Смотрите список задач. Завершенные задачи поражены. Там может быть трудно понять из-за технического языка, что именно было улучшено, или какие функции были добавлены. Пожалуйста, добавьте пояснительную информацию ниже.

Теперь можно перемещать или удалять столбцы и строки

Нажмите на заголовок столбца или строки. Затем нажмите на стрелку. Во всплывающем меню нажмите Cместить или Удалить.

Вставлять пустую строку или столбец

В том же всплывающем меню нажмите Вставить.

Копировать таблицу с веб-страницы в Визуальный Редактор

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

Вспомогательные инструменты

  • Excel2Wiki allows you to copy a spreadsheet from Excel, Apache OpenOffice, LibreOffice, or Gnumeric to convert it into wikicode table.

Смотрите также

  • Сортировка строк таблицы
  • m:Справка:Сортировка
  • w:Справка:Таблицы
  • Простой инструмент генерации таблиц

Примечания

  1. ↑ Таблица может быть создана как с использованием непосредственно табличных XHTML-элементов, так и с использованием вики-форматирования. Создание таблиц с использованием XHTML-элементов хорошо описано на различных веб-страницах и не будет здесь рассматриваться. Преимущество вики-кода для разметки таблиц состоит в использовании специальных буквенных символов, что позволяет легче представлять структуру таблицы по сравнению с XHTML-разметкой.
  2. ↑ HTML table cellpadding Attribute

html — Центрировать таблицу внутри div

спросил

Изменено 2 года, 6 месяцев назад

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

Пожалуйста, помогите, я застрял на этом. Я нашел много решений в Интернете, но не одно из них не работает в моем случае.

Я пытаюсь центрировать таблицу. Вот как это выглядит сейчас:

HTML:

 

  <таблица>

CSS:

 #multTable {
  ширина: 100%;
  поле: 0 авто;
  дисплей:блок;
  высота: 200 пикселей;
  переполнение-х: прокрутка;
  переполнение-у: прокрутка;
}

Я пробовал так:

 .container {
  ширина: 100%;
}
#мульттаблица {
  поле: 0 авто;
  высота: 200 пикселей;
  переполнение-х: прокрутка;
  переполнение-у: прокрутка;
}

Но таблица выходит за пределы размера страницы: Что я здесь делаю неправильно?

  • HTML
  • CSS

3

При первой попытке ваша таблица не будет центрирована, так как вы пытаетесь центрировать что-то, что занимает 100% возможного пространства. Технически он расположен по центру, вы просто не видите, что он занимает все пространство.

Итак, представьте, что у вас есть контейнер 100px . Внутри этого контейнера есть блок, который вы хотите центрировать. Но вы устанавливаете этот блок на 100px в ширину. Там просто нет пробела, чтобы увидеть!

Так что это не сработает:

 {
   ширина: 100%;
   поле: 0 авто;
}

Вместо этого вы должны задать центрирующему элементу фиксированную ширину:

 ширина: 400 пикселей; /* или что нужно */
поле: 0 авто;

Таким образом, вокруг него будет свободное пространство.

Вот, посмотрите: https://jsfiddle.net/9gwcjvp3/

вы пробовали это:

 .container {
    //
}
#мульттаблица {
    поле: 0 авто;
    переполнение-х: прокрутка;
    переполнение-у: прокрутка;
}

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

 .контейнер {
  ширина: 100%;
}
#мульттаблица {
  максимальная ширина: 100%;
}

Я бы помог еще увидеть остальные ваши хмл.

Добавить только это

 .container {
  дисплей: гибкий;
  выравнивание содержимого: по центру;
}

1

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Центрирование таблицы по центру страницы в уценке — Help

Oineo 1

Я пытаюсь центрировать структуру таблицы (не содержимое внутри, а саму таблицу).

Я пробовал комбинацию из {: class= , {: table= и другие параметры. Но так и не разобрался как это сделать. Каким был бы правильный способ добиться чего-то подобного? Судя по результатам поиска, которые я сделал в Google, больше не существует задокументированного способа центрирования таблицы, поскольку HTML5 больше не поддерживает

, что было наиболее рекомендуемым способом, который я мог найти на Stackoverflow.

Я думаю, что реальный ответ, который я ищу, заключается в том, как я могу указать элементы с определенным CSS (и в данном случае таблицу), чтобы они были центрированы на странице? Я все еще изучаю способ jekyll сделать это, поэтому извиняюсь, если это основная вещь.

михаэльбах 2

Если кажется, что больше ничего не работает (особенно для таблиц!), всегда можно «откатиться» к обычному HTML (и до HTML5), что мне нравится в Jekyll. Например, таблица здесь

michaelbach.de

Шпаргалка по остроте зрения

Острота зрения. Десятичная, LogMAR и острота зрения по Снеллену. Счет на пальцах, светоощущение.

начинается с
{% подробности захвата%}

…
в моем файле уценки. Markdown не позволяет использовать все, что может понадобиться для таблицы.

Майкл Каррин 3

Я хотел сказать то же самое. Я часто использую атрибут align, особенно там, где использование CSS невозможно, например, в файле README. md.

 

<таблица>

Работает и с уценкой, если не делать отступ

 

## Мой титул
![Мое изображение](logo.png)

Майкл Каррин 4

Использование CSS — см. этот учебник, в котором говорится, что выравнивание устарело (но пока работает), и что выравнивание текста не будет работать для самой таблицы.

granneman.com

Центрировать таблицу с помощью CSS | Скотт Граннеман 

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

Другой источник

 таблица {
  дисплей: блок;
  поле слева: авто;
  поле справа: авто;
  ширина: 40%;
}

источник https://www.w3schools.com/css/css_align.asp

майклбах 5

Ах, спасибо, теперь я заменил все выравнивания таблиц на теги стиля полей.

1 Нравится

Ойнео 6

Итак, что я понял из этого — нет полноценного способа сделать это без использования CSS?

Итак, из файлов, которые у меня есть (и страницы в качестве примера — я думаю, я могу включить только две ссылки, извините, вам нужно искать, а не публиковать их конкретно):
Блог
Сайт

Единственный способ, который я вижу, как сделать это без большого количества редактирования, состоит в том, чтобы добавить новый {% include blog-post.html %}, который конкретно связан с записями в блоге, и переопределить их. значения по умолчанию (например, таблица)?

Или есть более эффективный способ сделать это и воспроизвести его в среде? Сначала я искал CSS, чтобы сделать это, но просто не был уверен, есть ли более простой способ изменить это.

Не относящийся к этой теме, я только что заметил, что при загрузке той страницы, на которую я ссылался выше, CSS не загружается (по крайней мере, для меня) и отображается как полностью белая страница. Но CSS загружается для страниц, начиная с jekyll обслуживает , но не на страницах Github.

Ойнео 7

Для протокола: я пытаюсь конвертировать с этой страницы и из блога.

Майкл Каррин 8

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

Возможно, _includes/table.html , а затем вы повторно используете его для данных из файлов YAML.

Или используйте CSS для центральной страницы styles.css, которая загружается на каждой странице в теге head . Вам даже не нужно добавлять класс, если вы просто нацеливаете CSS на table { ... }

Для обоих требуется несколько строк кода. В CSS больше строк, но лучше в долгосрочной перспективе.

Майкл Каррин 9

Я вижу, у вас уже есть настройки CSS для нескольких подходов.

github.com
delize/delize.github.io/blob/9116e119b24e56e7d5954588ae4cd86f3137c3b9/assets/css/style-post.css#L4 
 
     
  1.  а, а: наведите курсор { 
    2. 
 
  2.  цвет: #d23e50 !важно; 
    3. 
 
  3.  украшение текста: нет; } 
    4. 
 
  4.  таблица { 
    5. 
 
  5.  поле слева:авто; 
    6. 
 
  6.  поле справа:авто; 
    7. 
 
  7.  } 
    8. 
 
  8. 
 
    9.  
  9.  изображение { 
    10. 
 
  10.  радиус границы: 10 пикселей; 
    11. 
 
  11.  дисплей: блок; 
    12. 
 
  12.  поле слева: авто; 
    13. 
 
  13.  поле справа: авто; 
    14. 
 
  14.  ширина: 75%; 
    15.

Ойнео 10

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

Какой-нибудь совет по поводу того, что CSS не загружается на реальной веб-странице?

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

MichaelCurrin 11

Щелкните правой кнопкой мыши элемент «Проверить элемент в таблице и проверьте примененный CSS» 12

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

И даже на главной странице требуется лишь немного CSS

Вы также можете использовать SCSS для объединения нескольких файлов CSS в один. См. документы jekyll и синтаксис импорта

Например, https://github.com/MichaelCurrin/coding-blog/blob/master/assets/css/style.scss

Или

 ---
---
$primary: rgb(137, 181, 223) !default;
// Импорт файлов темы.
@import "_variables.scss";
@import "_mixins.scss";
@import "_global.scss";
@import "_navbar.scss";
@import "_masthead.scss";
@import "_services.scss";
@import "_portfolio.scss";
@import "_timeline.scss";
@import "_team.scss";
@import "_contact.scss";
@import "_footer.scss";
/** Пользовательский контент **/
// Это должно быть размещено здесь, чтобы включить работу.
заголовок.masthead {
  // Более высокое значение сделает фотографию более увеличенной.
  padding-top: наследовать;
  // Переместить фоновое изображение вниз.
  поле сверху: 30px;
}

Ойнео 13

Он не загружает фон или другую информацию о стиле:
Исходный сайт
Созданный сайт Github
Локальный сервер (после удаления _site/ и .jekyll-* файлов:

Снимок экрана 2020 -09 -18 в 3.31.15 PM3360×2100 932 КБ

Это моя основная проблема, которую я вижу после загрузки в Github.

Обслуживает ли jekyll CSS иначе, чем страниц github ?

Майкл Каррин 14

Вы никогда не должны использовать версию _site каталог. GH создаст его для вас, когда вы отправите его в основную ветку и будете обслуживать ее.

Ошибка CSS. Поэтому я сделал PR, чтобы исправить ссылки CSS.

Убедитесь, что вы используете Jekyll 3. 9локально. Последней является Jekyll 4, но GH Pages использует версию 3.9, поэтому для согласованности вам тоже следует.

GitHub Pages запускает сборку jekyll, которая аналогична jekyll serve без сервера. Так что нет, ваш CSS будет одинаковым локально и на страницах GH, если вы правильно настроили настройку. Например, ваш baseurl как ‘’, что здесь нормально.

Майкл Каррин 15

Ваш фоновый путь действителен

1920×1280 150 КБ

github.com
delize/delize.github.io/blob/9116e119b24e56e7d5954588ae4cd86f3137c3b9/assets/css/style.css 
 ---
---
/*------------------------------------------------ -----------
* Название шаблона: UONE — полностью адаптивный персональный шаблон
* Автор: Retrina Group
* Версия: 1.0.0
* Создано: ноябрь 2019 г.
* Описание файла: основной css файл шаблона
*---------------------------------------------------------------- -----------
*/
/************************
    1.  ГЕНЕРАЛЬНЫЙ
    2. ПРЕДЗАГРУЗКА
    3.ЗАГОЛОВОК
    4.ГЕРОЙ
    5.НАВЫК
    6.ВОЗОБН.
    7.ПОРТФОЛИО
    8. ОТЗЫВ
Этот файл был усечен. показать оригинал

Тем не менее, этот стиль .hero никогда не появляется, если я ищу «героя» здесь:

https://delize.github.io/assets/css/style.css

У вас есть как style.css , так и style.sass в активах, поэтому я предполагаю, что они конфликтуют — style.sass будет выводиться как style.css

. Переименуйте style.css в custom-style.css, и вам, возможно, придется импортировать его в свой файл .sass, ссылаясь на него как на отдельный файл. .

Ойнео 16

А, это помогло. Там действительно был конфликт с style.css и style.sass. Мне придется работать над переносом всего на sass в будущем.

Последнее, что мне нужно выяснить (конкретно для этого макета), это почему это (полностью черный фон под h2 возникает:

image3360×1942 382 КБ

Когда эта строка раскомментирована.

Мое предположение состоит в том, что это связано с порядком объектов или с тем, что вы не можете добавлять гибкие переменные в style.css, потому что он обрабатывается перед страницей. Но я не уверен в этом на 100%. Что бы это ни стоило, я также пытался использовать страницу против публикации. Это все еще приводит к черному экрану.

1 Нравится

17

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

Переменная страницы может содержать специфические для страницы значения, такие как page.title или page.my_background

Проблема в том, что CSS визуализируется только один раз (как и должно быть) и выводится как один файл с использованием стилей. css или что-то еще в качестве концепции текущей страницы.

Следовательно, ваш фоновый URL-адрес недействителен. Если вы проверите отрендеренный файл .css на своем компьютере, вы увидите, что на самом деле происходит в этой части.

Вы можете попробовать установить CSS на каждой странице.

для вашего шаблона сообщения вы можете сделать это

 ---
макет: по умолчанию
---
<стиль>
.пост-герой {
  фоновый URL-адрес: URL-адрес («{{ page.my_background }}»)
}

<дел>
  {{ содержание }}

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

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

Майкл Каррин 18

Я бы выбрал меньшее количество подходов CSS и JS, так как они могут увеличивать общий размер страницы и конфликты, и это просто накладные расходы, чтобы хорошо справляться со всеми ними.

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

Майкл Каррин 19

Для интереса вот мой блог. Я использую тему Jekyll GH Pages, поэтому CSS в основном находится в самой теме.

Гитхаб

MichaelCurrin/блог кодирования

Мой блог с опытом и советами по программированию, посвященный разработке на Python.

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

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