Как сделать таблицу на весь экран html

forum.lissyara.su

Правила форума
Убедительная просьба юзать теги [code] при оформлении листингов.
Сообщения не оформленные должным образом имеют все шансы быть незамеченными.

Отправить тему по email
Версия для печати

Первое новое сообщение • 10 сообщений • Страница 1 из 1

RusBiT лейтенант Сообщения: 635 Зарегистрирован: 2007-08-03 11:43:53 Откуда: Красноярск Контактная информация:

[HTML] Таблица во весь экран

Пожаловаться на это сообщение
Цитата

Гуру, подскажите как создать таблицу с выравниванием по вертикали на весь экран?
Т.е. надо чтоб рамка таблицы заполняла весь экран
Чем больше я познаю FreeBSD, тем больше я считаю себя ламером

RusBiT

Хостинг HostFood.ru

Услуги хостинговой компании Host-Food.ru

Тарифы на хостинг в России, от 12 рублей: https://www.host-food.ru/tariffs/hosting/
Тарифы на виртуальные сервера (VPS/VDS/KVM) в РФ, от 189 руб.: https://www.host-food.ru/tariffs/virtualny-server-vps/
Выделенные сервера, Россия, Москва, от 2000 рублей (HP Proliant G5, Intel Xeon E5430 (2.66GHz, Quad-Core, 12Mb), 8Gb RAM, 2x300Gb SAS HDD, P400i, 512Mb, BBU):
https://www.host-food.ru/tariffs/vydelennyi-server-ds/
Недорогие домены в популярных зонах: https://www.host-food.ru/domains/

schizoid подполковник Сообщения: 3228 Зарегистрирован: 2007-03-03 17:32:31 Откуда: Украина, Чернигов Контактная информация:

Как правильно верстать HTML-таблицы: подробное руководство

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

Что же представляют собой HTML-таблицы и как их создать – во всем этом разбираемся в сегодняшней статье.

Как создать таблицу

Откройте HTML-документ и пропишите туда следующее:

Давайте попробуем добавить в наш тег немного информации – например, простой текстовый фрагмент «Моя первая таблица». В коде это будет выглядеть так:

Моя первая таблица

А вот как этот фрагмент отображается в браузере:

Создание первой таблицы в веб-странице через HTML-код

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

Мы можем использовать CSS-стили либо просто прописать в HTML-файле тег и добавить в него следующее:

 table

У нас появится маленькая точка внизу:

Как добавить обводку для таблицы в HTML-файле

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Как создать строки таблицы

 Моя первая таблица

В результате видим все ту же картину с маленькой точкой:

Как создать таблицу на веб-странице через HTML-код

Пропишите следующий код:

   Моя первая таблица

Создание таблицы в HTML-файле первые шаги

   Моя первая таблица  А вот и столбец  
  А вот и новая строка  И еще один столбец  
  Третья строка!  И последний столбец!

Создание таблицы в HTML с несколькими столбцами

Просто прописываем в теге пару строчек кода:

Как создать страницу в HTML-файле

Чтобы получить ту таблицу, которую мы хотим видеть, необходимо совместить рамки. Для этого прописываем еще одну строчку кода в тег для table:

table

И, вуаля, перед нами отображается полноценная таблица с привычными границами:

Как сверстать таблицу в HTML

table

Теперь наша таблица растянута:

Как задать ширину таблицы на весь экран в HTML-файле

Width со значением 100% растягивает таблицу на всю ширину страницы. Также вы можете указывать значения в пикселях, например width: 500px – в таком случае на любом экране таблица примет указанную ширину. Аналогичным образом можно присвоить и высоту – в пикселях или в процентах.

Заголовок столбцов и строк, объединение ячеек

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

Данный тег лучше всего применять для выделения ячейки-заголовка. Если необходимо визуальное форматирование, то воспользуйтесь стилями для обычных ячеек.

Давайте для примера добавим тег с надписью «Заголовок» в еще одну строку таблицы:

  Заголовок  
  Моя первая таблица  А вот и столбец  
  А вот и новая строка  И еще один столбец  
  Третья строка!  И последний столбец!

Заголовок
Моя первая таблица	А вот и столбец
А вот и новая строка	И еще один столбец
Третья строка!	И последний столбец!

В итоге получаем следующее:

Как добавить заголовок столбца в HTML-таблице

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

 Заголовок

Вот как это выглядит на экране:

Как связать два столбца в HTML-таблице

Данный атрибут мы можем добавлять к любым столбцам. Также есть еще один атрибут, который объединяет не столбцы, а строки – rowspan. Прописывается он аналогичным образом. Для примера давайте совместим вторую и третью строки второго столбца:

  Заголовок  
  Моя первая таблица  А вот и столбец  
  А вот и новая строка  И еще один столбец  
  Третья строка!

Заголовок
Моя первая таблица	А вот и столбец
А вот и новая строка	И еще один столбец
Третья строка!

Как совместить две строки в HTML-таблице

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

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

С базовыми правилами создания таблицы мы разобрались, теперь давайте пойдем немного дальше – первым делом обсудим общий заголовок, который присваивается сверху или снизу таблицы. Он задается с помощью тега , а его размещение корректируется с помощью свойства caption-side: значение top – для вывода до таблицы, bottom – после.

Заголовок может потребоваться в следующих случаях:

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

Давайте добавим в таблицу и посмотрим, что из этого выйдет. Для примера возьмем фразу «Таблица обо всем»:

Таблица обо всем

Как добавить заголовок таблицы в HTML

С помощью стилей мы можем задать отступы либо изменить жирность заголовка – это поможет вам улучшить визуальную часть. Для отступов используйте CSS-стили margin или padding, а жирность задается свойством font-weight или тегом .

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

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

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

Давайте добавим к уже существующей таблице данные теги:

Группировка столбцов в HTML-таблице

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

Тело таблицы

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

Тело таблицы располагается после заголовка и шапки .

Шапка и подвал таблицы

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

Общая сводка по HTML-таблицам

Давайте закрепим полученную информацию. Вот теги, которые мы использовали при построении HTML-таблиц:

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

Создание HTML-таблицы – это дело нескольких минут. Главное – разобраться с базовыми понятиями и попрактиковаться на нескольких примерах. В последующем создание таблицы не будет вызывать у вас никаких проблем.

Как установить ширину таблицы через стили?

Установить ширину таблицы в пикселах или процентах через стили.

Решение

Для определения ширины таблицы используйте стилевое свойство width , применяя его к селектору table , как показано в примере 1.

Пример 1. Ширина таблицы

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Ширина таблицы

В данном примере ширина всей таблицы устанавливается как 100%, а ширина левой колонки 100px. Это достигается за счёт добавления свойства width к селектору td с именем определённого класса ( ).

При использовании стилей для изменения ширины таблицы допустимо применять любые допустимые единицы измерения, а не только пикселы и проценты.

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Как задать ширину таблицы?

Чтобы установить ширину таблицы в пикселях или в процентах используйте стилевое свойство width, применяя его к селектору table , как показано в примере 1.