Как изменить ширину таблицы в html
Перейти к содержимому

Как изменить ширину таблицы в html

  • автор:

Как изменить ширину таблицы в html

Вам нужно вывести таблицу конкретно заданной ширины? Ваша таблица очень большая и при отображении ее «разносит» до неприличных размеров? Да еще при этом свойство max-width не работает? Тогда вы попали по адресу. В этой статье мы рассмотрим способы решения данной проблемы.

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

Давайте рассмотрим проблему в корне.

Согласно html спецификациям, результат использования свойств max(min)-width(height) для таблиц не определён.

Теперь вспомним немного теории: у нас есть возможность задавать произвольные размеры для блочного элемента.

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

Рассмотрим сказанное на примере.

Таблица ограниченной ширины

Как видим, теперь, методом «родительского контроля», можно ограничивать нашу «непослушную» таблицу.

Как изменить размер таблицы на странице html

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

Не забываем, что мы видим границы таблицы из-за присутствия border!

В чем измеряется ширина таблицы

Наиболее часто используемые единицы измерения ширины таблицы это:
1). Проценты %.
2). Пиксели px.
3). Другие единицы измерений!
Если ширина таблицы не указана, то браузер отображает ширину таблицы исходя из содержания таблицы! -> пример

Если указывается ширина таблицы 100%, то она будет растягиваться по всему экрану, в том случае, если она находится внутри другой таблицы или другого блока с указанной шириной, то таблица растянется на всю ширину блока, таблицы!

Если ширина таблицы окажется больше ширины родителя, то таблица выйдет за пределы блока.

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

За ширину таблицы отвечать свойство width(которое может быть и атрибутом и свойством):

Ширина таблицы внутри тега -> table

Одним из способом задать ширину таблицы — это размещение ширины width прямо в теге. Если ширина таблицы указывается таким способом, то по умолчанию, браузер выставляет измерение в пикселях:

Пример таблицы с шириной прямо в теге table

Пример таблицы с шириной width=»500″ внутри тега table

Пример таблицы с шириной width=»500″ внутри тега table

Ширина таблицы в процентах внутри тега

Если вам требуется указать ширину таблицы в процентах внутри тега table , то делаем так, для примера поставим 50% :

Таблица с шириной в процентах внутри тега:

Пример таблицы с шириной width=»50%» внутри тега table

Ширина таблицы через -> style

С использование style — существует два способа задать ширину:

1) Ширина таблицы через -> style внутри тега

Следующий способ задать ширину таблицы использовать атрибут style со значением свойства ширины и значение ширины -> внутри тега

Результат вывод на экран таблицы с шириной через атрибут style внутри тега table :

Пример таблицы с шириной через атрибут style внутри тега table

2) Ширина таблицы через -> style стили css

Для второго способа использование стилей на странице, нам потребуется создать тег style и внутри прописать, либо class, либо id

Во внутрь таблицы помещаем ранее созданный класс с шириной таблицы! Здесь… обращаю ваше внимание, что разрешение требуется указывать в любом случае!

Ширина таблицы через class

Результат ширины таблицы, который прописан внутри класса, который сам находится внутри тега style

Пример таблицы с шириной через class и тег style

Ширина таблицы через -> css файл

Для того, чтобы задать ширину таблицы через файл css — нужно

1). создать файл css +
2). Прикрепить css к странице +

3). Как в предыдущем пункте, либо создать class, id — где прописать ширину таблицы, в любом измерение!

В качестве примера приведу ширину таблицы выставленной через файл css с классом:

Ширина таблицы указана в файле как:

Результат вывода таблицы с шириной прописанной через файл css:

Ширина таблицы по содержимому

Если ширина таблицы не установлена никаким образом, то ширина таблицы выставляется автоматически браузером в зависимости от содержания таблицы:

Код таблицы ширина по содержимому:

Пример таблицы с одним столбцом,

Пример ширины таблицы по содержимому:

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

Здесь тестовый текст Ещё текст

Ширина таблицы больше ширины родительского блока

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

Сделаем таблицу заранее больше ширины нашего текстового поля 700px и поставим ей ширину 1000px.

Три столбца + три строки

Ширина таблицы больше родительского блока

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

Строка №1,Столбец №1. Строка №1,Столбец №2. Строка №1,Столбец №3.
Строка №2,Столбец №1. Строка №2,Столбец №2. Строка №2,Столбец №3.
Строка №3,Столбец №1. Строка №3,Столбец №2. Строка №3,Столбец №3.

Currently the table is too wide and causes the browser to add a horizontal scroll bar.

asked Nov 21, 2010 at 8:56

Update with CSS from the comments:

For mobile phones I leave the table width but assign an additional CSS class to the table to enable horizontal scrolling (table will not go over the mobile screen anymore):

answered Oct 4, 2013 at 15:33

14k 8 gold badges 116 silver badges 190 bronze badges

If the table content is too wide (as in this example), there’s nothing you can do other than alter the content to make it possible for the browser to show it in a more narrow format. Contrary to the earlier answers, setting width to 100% will have absolutely no effect if the content is too wide (as that link, and this one, demonstrate). Browsers already try to keep tables within the left and right margins if they can, and only resort to a horizontal scrollbar if they can’t.

Some ways you can alter content to make a table more narrow:

  • Reduce the number of columns (perhaps breaking one megalithic table into multiple independent tables).
  • If you’re using CSS white-space: nowrap on any of the content (or the old nowrap attribute,   , a nobr element, etc.), see if you can live without them so the browser has the option of wrapping that content to keep the width down.
  • If you’re using really wide margins, padding, borders, etc., try reducing their size (but I’m sure you thought of that).

If the table is too wide but you don’t see a good reason for it (the content isn’t that wide, etc.), you’ll have to provide more information about how you’re styling the table, the surrounding elements, etc. Again, by default the browser will avoid the scrollbar if it can.

answered Nov 21, 2010 at 9:44

T.J. Crowder T.J. Crowder

1.0m 184 gold badges 1874 silver badges 1836 bronze badges

Will not produce the exact result you are expecting, because of all the margins and paddings used in body. So IF scripts are OKAY, then use Jquery.

If not, use this snippet

You will notice that the width is perfectly covering the page.

The main thing is too nullify the margin and padding as I have shown at the body, then you are set.

answered Nov 21, 2010 at 9:27

76.6k 46 gold badges 181 silver badges 259 bronze badges

Instead of using the % unit – the width/height of another element – you should use vh and vw .
Your code would be:

But, if the document is smaller than 100vh or 100vw , then you need to set the size to the document’s size.

answered Jul 10, 2020 at 17:04

93 1 silver badge 10 bronze badges

Set font-size in viewport-width-related units, e.g.:

This will make font unreadable when page is too narrow, but sometimes this is acceptable.

2,342 2 gold badges 30 silver badges 32 bronze badges

answered Jun 30, 2017 at 17:06

Put the table in a container element that has

or make the table fit to the screen and overflow:scroll all table cells.

answered Feb 21, 2018 at 18:01

There is already a good solution to the problem you are having. Everyone has been forgetting the CSS property font-size : the last but not least solution. One can decrease the font size by 2 to 3 pixels. It may still be visible to the user and for somewhat you can decrease the width of the table. This worked for me. My table has 5 columns with 4 showing perfectly, but the fifth column went out of the viewport. To fix the problem, I decreased the font size and all five columns were fitted onto the screen.

For your information, if your table has too many columns and you are not able to decrease, then make the font size small. It will get rid of the horizontal scroll. There are two advantages: your style for mobile web will remain the same (good without horizontal scroll) and when user sees small sizes, most users will zoom into the table to their comfort level.

93 1 silver badge 10 bronze badges

answered Feb 11, 2017 at 19:05

html-таблицы

HTML-таблицы используются для логического структурирования контента. Они состоят из строк и ячеек которые можно объединять. В этой статье вы найдете подробное руководство по созданию HTML-таблиц с нуля. Материал рассчитан на новичков — школьников и студентов первых курсов. Рассмотрим как создаются таблицы в HTML.

Если вы не хотите изучать материал, а хотите просто создать таблицу, вы можете воспользоваться генератором html-таблиц.

Таблицы создаются они с помощью тега

который имеет закрывающий тег

. Код самой простой таблицы из двух строк и столбцов выглядит следующим образом.

Результат выполнения кода будет следующим.

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Стиль по умолчанию:
display: table;
border-collapse: separate;
box-sizing: border-box;
text-indent: initial;
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-style: normal;
color: -internal-quirk-inherit;
text-align: start;
border-spacing: 2px;
border-color: grey;
font-variant: normal;

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

В стилях таблиц по умолчанию граница отсутствует. Добавить границы можно с помощью HTML-кода и с помощью CSS.

Устанавливает границу равную 1 пикселю, серого цвета. Равнозначным будет CSS-код:

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Цвет границ задается с помощью bordercolor, а размер с помощью border.

Как убрать внутренние границы таблицы?

Вопрос очень интересный. Есть множество способов как так или иначе убрать внутренние границы в таблице. Но, я считаю, что самый простой способ это убрать все границы в таблице, «завернуть» таблицу в блок с границами. Это будет гораздо проще чем все остальные способы.

Давайте разберемся на примере.

Таблица сотрудников фирмы
Строка таблицы
Ячейки таблицы

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

Существует тег для создания заголовка таблицы и тег для создания заголовка столбца.

Для создания заголовка столбца используется тег (от англ. table head — заголовок таблицы).

Все это немного запутано, правда? Давайте разбираться на примере.

Таблица сотрудников фирмы
Таблица по центру

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

Размер таблицы

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

При этом можно указать размеры таблицы в пикселях, где width — ширина таблицы, height — высота таблицы. Например, сделаем нашу таблицу шириной 400 пикселей.

ФИО Должность
Иванов Иван Иванович Директор
Петрова Любовь Николаевна Главный бухгалтер

Более удобно задавать размер таблицы в процентах. В таком случае таблица становиться адаптивной. Изменим значение widthн равным 100%. Длинна будет адаптироваться в зависимости от контента. Результат будет следующим.

ФИО Должность
Иванов Иван Иванович Директор
Петрова Любовь Николаевна Главный бухгалтер
Размер шрифта

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

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

Таблица сотрудников фирмы

Здесь мы указываем что весь текст в таблице должен быть размером 12px, а шрифт — ‘Times New Roman’.

Выравнивание текста

Выровнять текст в таблице можно несколькими способами. Рассмотрим выравнивание с помощью HTML.

Разбираемся на примере заголовком столбцов. Горизонтальное выравнивание осуществляется с помощью атрибута align. Выровняем заголовки столбцов по центру.

Теперь заголовки столбцов (ФИО и Должность) выровнены по центру.

Таблица сотрудников фирмы

Аналогичное действие можно выполнить с помощью CSS-кода: text-align:center;

Вертикальное выравнивание осуществляется с помощью тега valign который имеет следующие свойства:

  • top — по верхнему краю.
  • middle — по середине.
  • bottom — по нижнему краю.
  • baseline — по базовой линии.
Отступы в таблице

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

Таблица сотрудников фирмы

Видите, текст уже не так прижимается к границе. С помощью CSS сделать это можно следующим образом: td

Объединение ячеек

Довольно важный момент в HTML-таблицах это объединение ячеек.

Объединение может быть горизонтальным.

Горизонтальное объединение ячеек

Вертикальное объединение ячеек

Для горизонтального объединения ячеек используется атрибут colspan. Соответственно если у нас 4 ячейки, а мы объединяем две по горизонтали, то в первой строке у нас будет одна ячейка. Разберемся на примере.

Таблица сотрудников фирмы

Теперь представим ситуацию что на время отпуска главного бухгалтера директор занимает две должности. Для вертикального объединения ячеек будем использовать атрибут rowspan.

Таблица сотрудников фирмы

Оформление HTML-таблиц

Под оформлением таблиц я имею ввиду следующие манипуляции:

  • Изменить цвет фона.
  • Изменить цвет ячейки (или строк).
  • Картинки в таблице (в том числе с прозрачностью).
  • Кнопки и элементы управления в таблице.
  • Скролл (прокрутка) содержимого таблицы.
Изменение цвета фона таблицы

Изменить цвет фона таблицы с помощью HTML можно с помощью атрибута bgcolor. Давайте сделаем фон нашей таблицы не стандартным.

Таблица сотрудников фирмы
Изменить цвет ячейки (или строк)

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

Таблица сотрудников фирмы
Картинки в ячейке

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

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

А затем мы применим CSS-код для оформления ячейки в которой не будет фотографии.

Таблица сотрудников фирмы

Пояснения. В первом случае у нас в ячейку вставляется изображение и ячейка адаптируется под размер картинки.

Во втором случае картинка является фоновым изображением, поэтому я добавил height:200px; — что бы фоновое изображение отобразилось полностью. В этом случае размер ячейки (если не задавать его как это сделал я) зависит не от размера фонового изображения, а от содержимого ячейки (в данном случае — текста).

Кнопки и элементы управления

Кнопки и элементы управления вставляются в таблицу стандартными способами. Создадим справа еще один столбец и вставим туда текстовое поле с кнопкой.

Таблица сотрудников фирмы
Скролл или прокрутка таблицы

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

Таблица сотрудников фирмы

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

Генератор HTML-таблиц

В этом уроке мы с вами научимся работать с таблицами в HTML.

Для создания любой таблицы в HTML нужно всего 3 тега. Тег создаёт саму таблицу. Тег создаёт одну строку внутри таблицы. Тег создаёт одну ячейку внутри строки.

Давайте создадим простейшую таблицу на новой страничке table.html:

Пример таблицы

В браузере результат будет выглядеть так:

Как сделать границы таблицы в HTML

По-умолчанию границы таблицы не отображаются. Чтобы сделать это добавим на страничку стили:

CSS-свойство border позволяет задать стиль самой границы, а свойство border-collapse: collapse позволяет «схлопнуть» границы между ячейками. Если этого не сделать, табличка будет иметь довольно криповый вид — попробуйте и убедитесь сами.

Чтобы добавить отступы внутри ячеек добавим к ним свойство padding:

Объединение ячеек в HTML

Зачастую несколько ячеек нужно объединить в одну. Объединять их можно как в строках, так и в столбах.

Объединение ячеек по горизонтали

Для объединения ячеек по горизонтали используется атрибут colspan. Значение этого атрибута устанавливается равным количеству ячеек, на которые нужно расширить ячейку с этим атрибутом. То есть если мы хотим чтобы ячейка расширилась и стала занимать место ещё одной справа, значит этот атрибут будет равен двум.

Таблица с объединением ячеек по горизонтали

Попробуем создать вот такую таблицу:

Для этого добавляем в первой строке одну простую ячейку, потом вторую с атрибутом colspan=»2″, чтобы она заняла 2 ячейки. А после этого переходим на следующую строку и добавляем 3 простых ячейки:

Объединение ячеек по вертикали

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

Таблица с объединением ячеек по вертикали

Добавляем на первой строке ячейку, расширенную вниз на ещё одну ячейку. Потом на этой же строке добавляем еще пару простых ячеек. Переходим на следующую строку. Здесь место первой ячейки у нас уже занято ячейкой из первой строки. Поэтому просто добавляем две простых ячейки.

Одновременное объединение по вертикали и горизонтали в одной таблице

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

Таблица с объединением столбцов и строк

Что? Читаете дальше, даже не попытавшись? А ну давайте пробуйте!

Если всё же не получилось, то вот ответ:

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

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

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

Как изменить размер таблицы в HTML

Чтобы задать ширину и высоту таблицы можно воспользоваться CSS-свойствами width и height соответственно. Ими можно задать как абсолютные значения в пикселях, так и относительные в процентах (относительно размеров окна браузера). Эти же свойства можно применить отдельно к каждой ячейке/столбцу/строке.

Результат:

А теперь за домашку!

Мы привыкли, что таблица состоит из строк и столбцов и, вставляя таблицу в Word, мы указываем 3 столбца на 2 строки. Вставляя таблицу на HTML-страницу, сначала мы должны показать что сейчас будет таблица. Для этого воспользуемся тэгом TABLE>. Далее указываем, что сейчас будет строка, используя тэг TR>. А в этой строке будет три ячейки, и мы пишем три раза TD>…TD>.

Получим:

Строка закончилась и мы должны ее закрыть TR>.

Теперь начинается новая строка, открываем TR>. Опять три ячейки — TD>…TD> записываем трижды. Строка закончилась TR>. Таблица закончилась TABLE>.

Получаем:

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

Пример

Результат

создание таблицы

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

Результат

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

Как изменить цвет границы

Изменим теперь цвет границы. Для этого в тэг TABLE> нужно внести атрибут BORDERCOLOR и указать значение цвета.

Зададим цвет для границы зеленый.

Смотрим результат:

цвет границы

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

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

Ширина каждого столбца задается по ее содержимому. Для того чтобы изменить размер таблицы, нужно задать значение ее ширины. Увеличим размер таблицы и зададим его значение в 400 точек.

Замечание. Размер таблицы можно указывать в точках

или в процентах (в процентах от размера окна браузера)

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

Просмотрим результат в браузере:

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

Как выровнять таблицу

Не всегда таблица должна располагаться по левому краю. Давайте расположим наш справочник по центру, для этого перед таблицей установим тэг P ALIGN=”CENTER”>, а после таблицы его закроем:

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

Давайте закрасим нашу таблицу желтым цветом. Для этого в тэге TABLE> пропишем BGCOLOR и укажем цвет.

Наша страница будет иметь код:

А в браузере

фон таблицы

Как закрасить строку

Теперь закрасим верхнюю строку (шапку) в зеленый. Мы хотим закрасить строку, поэтому и атрибут BGCOLOR должны указать в тэге TR.

Результат

фон строки в таблице

Как закрасить ячейку

Дополним нашу таблицу данными еще нескольких человек

Результат

фон ячейки

Теперь давайте закрасим столбец с нумерацией. Так как в HTML нет понятия столбец, то на первый взгляд это выглядит затруднительно. Но на самом деле все довольно просто: в каждой строке нужно закрасить первую ячейку. То есть в тэге TD> прописать атрибут BGCOLOR и указать цвет

В браузере вы увидите такую таблицу:

фон ячейки в таблице

Как задать высоту таблицы (строки)

HTML дает возможность задать как высоту всей таблицы, так и отдельных строк.

Для задания высоты таблицы атрибут HEIGHT нужно указать в тэге TABLE, а чтобы изменить высоту отдельной строки – указать этот атрибут в тэге TR.

Для примера увеличим высоту первой строки

Результат

высота строки

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

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

Результат

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

Выравнивание содержимого таблицы (по горизонтали и вертикали)

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

И если с выравниванием по вертикали все понятно (у тэгов TABLE, TR и TD есть атрибут ALIGN). То как выровнять по горизонтали не совсем понятно.

Для выравнивания содержимого таблицы, строки или ячейки по горизонтали существует атрибут VALIGN. И этот атрибут имеет свои параметры TOP (выравнивание по верхнему краю), MIDDLE (по середине), BOTTOM (по нижнему краю).

Для нашей шапки установим выравнивание по центру, по середине.

Также выровняем содержание ячеек с нумерацией и телефонами по центру.

В браузере увидим:

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

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

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

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

Ширина ячеек

Рассмотрим на примере тот случай, когда размер ячеек нужно указать. Предположим,
что нам требуется создать на веб-странице две колонки, одна из них должна иметь
размер 200 пикселов, а вторая занимать оставшееся место. Создаем таблицу с двумя
ячейками и для левой ячейки задаем параметр width=»200″
(пример 1). Единицы измерения ставить не нужно, браузер сам понимает, что
если задано число, значит, используются пикселы.

Пример 1. Ширина ячеек

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

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

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

Пример 2. Свойство table-layout

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

Рис. 1. Отображение рисунка при использовании свойства table-layout

Современные браузеры (Firefox 3+, Internet Explorer 8+, Chrome и Safari) несколько иначе показывают таблицу (рис. 2).

Рис. 2

Рис. 2. Отображение рисунка в браузере Safari

Пример 3. Полосы прокрутки в ячейках

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

Рис. 3. Отображение рисунка при использовании свойства overflow

Рис. 3. Отображение рисунка при использовании свойства overflow

Содержимое ячеек

Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном
случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причем
пробел в расчет не принимается. Естественно, вид ячеек различается только в
том случае, если вокруг них установлена граница. При использовании невидимой
рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает.

Старые браузеры не отображали цвет фона пустых ячеек вида ,
поэтому в том случае, когда требовалось оставить ячейку без содержимого, но
отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел (   ).
Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2
пиксела, из-за чего широкое распространение получил прозрачный рисунок размером
в один пиксел. Действительно, такой рисунок можно масштабировать на свое усмотрение,
но он на веб-странице никак не отображается.

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

Объединение ячеек

Предположим, что нам потребовалось использовать объединение некоторых ячеек
в таблице, как, например, показано ниже. Причем высота оранжевой и серой ячейки
жестко задана и равна 30 пикселам.

Ячейка 1 Ячейка 2
Ячейка 3
Ячейка 4

Для наглядности код этой таблицы приведен в примере 4.

Пример 4. Таблица с объединенными ячейками

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

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

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

Скорость загрузки таблицы

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

Исходя из этого факта, таблицы не используют для хранения большой информации
(от 100 кБ). А чтобы ускорить загрузку табличного макета, его разбивают на отдельные
таблицы или используют свойство table-layout , применение
которого позволяет несколько повысить скорость отображения содержимого таблицы.

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

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

По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.

Пример 1. Ширина таблицы в процентах

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

Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto , как показано в примере 2.

Пример 2. Выравнивание таблицы с помощью margin

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

Цвет фона

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

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

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

Изменение цвета фона

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

Если нам требуется сделать зебру — так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child , добавляя его к селектору tr . Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов и (пример 4).

Пример 4. Создание зебры

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

Зебра

Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd , тогда серым цветом будут выделяться нечётные строки.

Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even) .

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

Полем называется расстояние между границей ячейки и её содержимым. Без полей текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие, добавление же полей позволяет улучшить читабельность текста. Для этой цели применяется стилевое свойство padding , которое работает с селектором td или th , как показано выше в примерах 3 и 4. Обычно указывают одно значение, оно тогда задаёт пустое пространство вокруг содержимого ячейки сразу со всех сторон. Два значения пишутся, когда надо задать разные поля по вертикали (первое значение) и горизонтали (второе значение).

Расстояние между ячеек

Между ячеек имеется небольшое пустое расстояние, которое не видно, пока для ячеек не установить границу или фоновый цвет. Исходно это расстояние равно 2px и его можно изменить с помощью свойства border-spacing , добавляя его к селектору table (пример 5).

Пример 5. Использование border-spacing

Добавляя этот стиль к любой таблице получим результат продемонстрированный на рис. 3.

Вид таблицы с расстоянием между ячеек

Рис. 3. Вид таблицы с расстоянием между ячеек

Если к table добавляется свойство border-collapse со значением collapse , то border-spacing игнорируется, потому как расстояния между ячеек уже нет.

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

Пример 6. Применение свойства border-collapse при создании рамок таблицы

Разница между границами таблицы при добавлении свойства border-collapse , а также без него, представлена на рис. 4.

свойство не установлено

а — свойство не установлено

свойство установлено

б — свойство установлено

Рис. 4. Вид таблицы при использовании border-collapse

На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).

Пример 7. Линии между строк

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

Таблица с горизонтальными линиями

Рис. 5. Таблица с горизонтальными линиями

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

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

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


Таблица


Заголовок 1 Ячейка 1 Ячейка 2
Заголовок 2 Ячейка 3 Ячейка 4


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

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

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

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

В данном примере выравнивание текста происходит по верхнему краю. Результат примера показан на рис. 7.

Используем таблицы в html

You are currently viewing Используем таблицы в html

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

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

А ее внешний вид будет такой.

А, если вы хотите, чтобы в коде вашей таблице была одна строка и к примеру три ячейки, то ее код будет таким.

А внешний вид таблицы будет такой.

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

Следовательно, внешний вид таблицы будет таким.

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

Внешний вид таблицы будет таким.

строка 1 ячейка 1 строка 1 ячейка 2 строка 1 ячейка 3
строка 2 ячейка 1 строка 2 ячейка 2 строка 2 ячейка 3

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

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

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

Ее внешний вид будет такой.

Теперь, в код первой ячейки я вставлю код точно такой же таблицы.

Теперь внешний вид нашей таблице будет таким. Не обращайте внимание на пропорции ячеек, чуть ниже я покажу, как изменять размер каждой ячейки.

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

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

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

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

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

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

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

Похожие публикации:

  1. Выберите теги которые могут располагаться в теле html документа внутри тега body
  2. Как html перевести в pdf онлайн
  3. Как в html сделать комментарий
  4. Как внедрить python в html

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

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

      
Значение @очень_длинная_переменная
Значение @переменная
@переменная х @переменная @переменная

Отслеживать
задан 21 апр 2015 в 12:05
discipleartem discipleartem
338 4 4 серебряных знака 23 23 бронзовых знака

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Как вариант для каждой строки создавать отдельную таблицу, а не в одной, как у Вас. Либо сверстать на дивайдерах.

Итоговый вариант на таблицах:

      
Значение: @очень_длинная_переменная
Значение: @длинная_переменная
@переменная x @переменная @переменная

Отслеживать
ответ дан 21 апр 2015 в 12:13
1,861 1 1 золотой знак 15 15 серебряных знаков 25 25 бронзовых знаков
Спасибо, попробую таблицами, но хотелось бы поменьше таблиц.

ы не подходят.

21 апр 2015 в 12:29
Надо подумать, без объединения кажется нельзя.
21 апр 2015 в 14:57

по моему с таблицами вместо строк получилось еще хуже ))). А ы всеми почтовиками/браузерами/клиентами читаются нормально?

23 апр 2015 в 12:57

@discipleartem что-то Вы странное сделали. я совсем не это имела в виду. А покажите как Вы хотите, чтобы было в итоге (хоть на бумаге нарисуйте), а то пока не понятно, какой Вы хотите результат.

23 апр 2015 в 14:51

Задача №1 — чтобы не было пробелов между ячейками в строке и чтобы размер ячейки автоматически зависел только от контента данной ячейки. Красным цветом обозначены пробелы, которых быть не должно.

Как изменить ширину таблицы в html

В связи с переходом на новый движок. возможны сбои в работе! Простите!
Работы производятся прямо сейчас 08-06-2024! ×

Не забываем, что мы видим границы таблицы из-за присутствия border!

В чем измеряется ширина таблицы

Наиболее часто используемые единицы измерения ширины таблицы это:

1). Проценты %.

2). Пиксели px.

Если ширина таблицы не указана, то браузер отображает ширину таблицы исходя из содержания таблицы! -> пример

Если указывается ширина таблицы 100%, то она будет растягиваться по всему экрану, в том случае, если она находится внутри другой таблицы или другого блока с указанной шириной, то таблица растянется на всю ширину блока, таблицы!

Если ширина таблицы окажется больше ширины родителя, то таблица выйдет за пределы блока.

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

За ширину таблицы отвечать свойство width(которое может быть и атрибутом и свойством):

Ширина таблицы внутри тега -> table

Одним из способом задать ширину таблицы — это размещение ширины width прямо в теге. Если ширина таблицы указывается таким способом, то по умолчанию, браузер выставляет измерение в пикселях:

Пример таблицы с шириной прямо в теге table

Пример таблицы с шириной width=»500″ внутри тега table

Пример таблицы с шириной width=»500″ внутри тега table

Ширина таблицы в процентах внутри тега

Если вам требуется указать ширину таблицы в процентах внутри тега table , то делаем так, для примера поставим 50% :

Таблица с шириной в процентах внутри тега:

Пример таблицы с шириной width=»50%» внутри тега table

Ширина таблицы через -> style

С использование style — существует два способа задать ширину:

1) Ширина таблицы через -> style внутри тега

Следующий способ задать ширину таблицы использовать атрибут style со значением свойства ширины и значение ширины -> внутри тега

Результат вывод на экран таблицы с шириной через атрибут style внутри тега table :

Пример таблицы с шириной через атрибут style внутри тега table

2) Ширина таблицы через -> style стили css

Для второго способа использование стилей на странице, нам потребуется создать тег style и внутри прописать, либо class, либо id

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

Ширина таблицы через class

Результат ширины таблицы, который прописан внутри класса, который сам находится внутри тега style

Пример таблицы с шириной через class и тег style

Ширина таблицы через -> css файл

Для того, чтобы задать ширину таблицы через файл css — нужно

3). Как в предыдущем пункте, либо создать class, id — где прописать ширину таблицы, в любом измерение!

В качестве примера приведу ширину таблицы выставленной через файл css с классом:

class=»table»

Ширина таблицы указана в файле как:

Результат вывода таблицы с шириной прописанной через файл css:

n Дата Страница
1 2 3

Ширина таблицы по содержимому

Если ширина таблицы не установлена никаким образом, то ширина таблицы выставляется автоматически браузером в зависимости от содержания таблицы:

Код таблицы ширина по содержимому:

Пример таблицы с одним столбцом,

Пример

Пример ширины таблицы по содержимому:

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

Здесь тестовый текст Ещё текст

Ширина таблицы больше ширины родительского блока

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

Сделаем таблицу заранее больше ширины нашего текстового поля 700px и поставим ей ширину 1000px.

Три столбца + три строки

Ширина таблицы больше родительского блока

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

Строка №1,Столбец №1. Строка №1,Столбец №2. Строка №1,Столбец №3.
Строка №2,Столбец №1. Строка №2,Столбец №2. Строка №2,Столбец №3.
Строка №3,Столбец №1. Строка №3,Столбец №2. Строка №3,Столбец №3.

Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

ширина таблицы html как задать ширину таблицы html html таблица фиксированной ширины растянуть таблицу по ширине html как изменить ширину таблицы в html таблица по ширине страницы html html ширина таблицы в процентах задать ширину таблицы html ширина строк таблицы html фиксированная ширина таблицы html таблица по ширине страницы html ширина таблицы html в процентах html растянуть таблицу на всю ширину ширина таблицы 100 html html как сделать таблицу по ширине окна html вложенная таблица больше ширины колонки

Ещё : Игра «пятнашки»
Угадай страну по флагу
dwweb.ru есть здесь:

ruweb

Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru!
© 2015 — 2024 Контакты. Реклама на сайте
Лучший хостинг : RUWEB + помощь по RUWEB

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

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

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

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

Результат данного примера показан на рис. 1. Для первой таблицы ширина задана как 100% и таблица занимает всю ширину окна браузера. Для второй таблицы ширина фиксирована и задана как 300 пикселей.

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

Рис. 1. Ширина таблиц

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

См. также

  • height
  • width
  • Абсолютное позиционирование
  • Блочные элементы
  • Высота и ширина в CSS
  • Открываем блочную модель
  • Поток
  • Примеры использования float
  • Размеры
  • Размеры блока
  • Создание флексбоксов
  • Строчные элементы

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

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