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

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

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

Напоминаю, что ширина обозначается английским словом:

Width Мы уже сделали таблицу , изменили её ширину , поставили посередине , а про ширину столбцов совсем и забыли!

Если мы помним, из предыдущих тем, то ширина таблицы измеряется в 1. %, 2.пикселях(px)! Эти свойства наследуют столбцы!

Что задать ширину столбца, с ним нужно поступить аналогично установки ширины самой страницы!

Давайте поэкспериментируем! С процентами!

Создадим таблицу с тремя столбцами!

И присвоим им ширину 25% + 50% + 25% сумма должна быть равна 100%.

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

w

w

w

Теперь ширину столбца сделаем в пикселях.

Общая ширина текстового поля, где вы читаете данный текст не равна 600 пикселям.

Делим на 3 части 150px + 300px + 150px

Смотрим наши получившиеся столбцы с разной шириной:

w

w

w

Теперь ширину столбца пропишем через css.

Ширина столбца через css

Сам столбец обозначается тегом «td»:

Содержание столбца.

Есть несколько вариантов, как прописать ширину столбцов.

К примеру, если вы пропишите сам столбец и к нему прикрепите ширину.

Но у этого способа есть один самый главный минус — все столбцы на странице будут иметь эту ширину!

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

Например — таблица с шириной через css.

Обратите внимание, что на третьем столбце ширина не прописана — вопрос — какой ширины должен быть третий столбец!?

Таблицы

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

Кстати, если не знали, то создание сайтов, а вернее HTML-кода, называется версткой, и вы сейчас учитесь именно ей. Вообще существует три вида верстки: табличная, о которой я вам рассказал выше; слоями (блочная), требующая среднего уровня знания стилей (CSS) и комбинированная. До сих пор в интернете идут ожесточенные споры о том, какая же из них лучше, но поверьте, спорят там в основном любители споров или новички, так как любой профессионал вам скажет — лучшая верстка та, которая больше подходит в конкретном случае, вот и все! А спорить о том, что лучше — танк или самолет — пустая трата времени. Но справедливости ради скажу, что по многим параметрам блочная верстка все же предпочтительней, поэтому, если верстальщик может сделать задание, как с помощью таблиц, так и с помощью блоков, то обычно выбирается последнее. И это правильно. Но вам об этом задумываться рано, ведь, как я уже сказал, с помощью одного языка HTML можно верстать только таблицами.

Создание таблиц в HTML

Для создания простой HTML-таблицы надо использовать три типа тегов, это

, и , а остальные крайне редко. Не забыли еще, что значит «содержать»? Это значит, что в

. Поэтому давайте сделаем так: посмотрите на пример указанный ниже и попробуйте самостоятельно догадаться, какие теги и для чего нужны. Пример создания таблиц в HTML Результат в браузере Ячейка 1.1 Ячейка 1.2 Ячейка 1.3 Ячейка 2.1 Ячейка 2.2 Ячейка 2.3 Ячейка 3.1 Ячейка 3.2 Ячейка 3.3 Теперь проверим ваши догадки. И опять вам говорю — не старайтесь все запоминать, не надо, главное — понять. Итак: Тег . — это корневой элемент любой таблицы, между открывающим и закрывающим тегами которого находятся все остальные теги. Он является блочным, то есть создает до и после себя переводы строк в начало. А вот содержать он не может ни блочные, ни встроенные (уровня строки) теги, а только специальные теги таблицы из которых практически всегда используется

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

Тег

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

Тег

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

.
. Тег	.	и применяется вместо него, когда необходимо сделать заголовочные ячейки. Такие ячейки отличаются от обычных только тем, что браузеры выделяют в них текст жирным шрифтом и располагают содержимое по центру. При создании таблиц всегда обращайте внимание на то, чтобы во всех рядах было одинаковое количество ячеек. Разное количество не является в HTML ошибкой, но в таких случаях ваша табличка может просто «поехать» и все отобразиться совсем не так, как вы хотели. HTML-таблицы по центру, слева, справа По умолчанию браузеры располагают таблицы с левой стороны родительского элемента, в котором она находится. В большинстве случаев это вполне устраивает, особенно если таблицу растягивают во всю ширину. Но все-таки иногда хочется разместить HTML-таблицу по центру или справа. В прошлом у тега имелся атрибут align , с его помощью и можно было изменять положение таблицы. Но он стал устаревшим, и сколько еще времени его будут поддерживать браузеры — неизвестно, так как на смену пришли стили (CSS). И чтобы показать вам правильный метод, я использую атрибут style . . — Таблица располагается слева. Это значение по умолчанию. . — Расположение таблицы справа. . — HTML-таблица по центру. Теперь поясню. Используя эти значения, мы изменяем размер внешних полей (отступов) таблицы. Так как таблица является блочным HTML-элементом, а у блоков четыре стороны, то и параметры указываются для четырех сторон по часовой стрелке: style= «margin:сверху справа снизу слева» . Ну, что такое ноль, я думаю, вы понимаете, а вот «auto» говорит браузеру, чтобы он сам высчитывал с данной стороны размер пустого пространства, исходя из значений других сторон. Вот и получается, что если с трех сторон ноль, то с четвертой — все остальное пространство, а если с двух сторон «auto», то значит делим внешние поля пополам. И самое главное — не бойтесь использовать CSS вместо чистого и, во многих ситуациях, «деревянного» и устаревшего HTML. Так как этим вы вкладываете в свое развитие, а не возвращаетесь к каменным топорам! Тем более я вам все преподношу «на блюдечке». Пример расположения таблицы по центру Результат в браузере Ячейка 1.1 Ячейка 1.2 Ячейка 1.3 Ячейка 2.1 Ячейка 2.2 Ячейка 2.3 Ячейка 3.1 Ячейка 3.2 Ячейка 3.3 Изменение ширины HTML-таблиц и ячеек По умолчанию браузеры высчитывают ширину таблицы исходя из содержимого ее ячеек, а изменить ее можно, используя знакомый вам атрибут width , общий синтаксис такой: . — любое неотрицательное число указывающее ширину в пикселях. . — неотрицательное число задающее ширину в процентах (%) исходя из ширины родительского контейнера, элемента в котором находится таблица. Тем не менее, если указанная ширина будет меньше, чем необходимо для размещения всего содержимого HTML-таблицы, то браузеры ее проигнорируют и увеличат до нужной. А вот атрибута width для изменения ширины ячеек нет, вернее он был, но устарел, поэтому снова применим стили (CSS). В качестве значений для ширины ячеек лучше тоже использовать только пиксели (px) и проценты (%). Естественно процентные размеры будут высчитываться исходя из ширины таблицы. Только не забудьте, что при указании размеров в атрибуте style , всегда после чисел пишутся единицы измерения, в том числе и пиксели. И тоже, если вы укажете ширину ячейки, а содержимое в нее не уместится — браузер проигнорирует вашу ширину и установит свою. В HTML-таблицах ширина столбца всегда равна его самой широкой ячейке, что, впрочем, вполне естественно вообще для любых таблиц. Поэтому, меняя ширину одной (любой) ячейки — вы меняете ширину всего столбца. Пример изменения ширины HTML-таблиц и ячеек Результат в браузере Ячейка 1.1 Ячейка 1.2 Ячейка 2.1 Ячейка 2.2 Как вы уже знаете, по умолчанию браузеры не отрисовывают рамки у таблиц, поэтому, чтобы вы четко увидели картину изменения ширины, я установил атрибут border , о котором мы поговорим чуть позже. Изменение высоты HTML-таблиц и ячеек В стандартном HTML у тега нет атрибута для изменения высоты таблицы, браузеры ее автоматически высчитывают исходя из содержимого. А вот у стилей (CSS) такая возможность есть, поэтому их и будем использовать. . — указывайте высоту таблицы только в пикселях (px), так как процентную запись браузеры игнорируют. А вот для изменения высоты ячеек в HTML у тегов	и	все-таки был атрибут height (вот и пойми этих разработчиков), но он устарел, поэтому снова стили. Как и для ширины, используйте пиксели (px) или проценты (%), но здесь есть один момент. Когда вы указываете процентную запись, то конечно высота высчитывается исходя из размеров таблицы, поэтому если высота блока не указана — браузеры проигнорируют значения для ячеек. Ну и естественно браузеры проигнорируют ваши размеры, как для таблицы в целом, так и для ячеек, если содержимое не будет вмещаться. В HTML-таблицах высота строки (как и ширина столбца) всегда равна высоте ее самой высокой ячейки. Поэтому, меняя высоту одной (любой) ячейки — вы меняете высоту всей строки. Пример изменения высоты HTML-таблиц и ячеек Результат в браузере Ячейка 1.1 Ячейка 1.2 Ячейка 2.1 Ячейка 2.2 Выравнивание в HTML-таблицах Если вы обратили внимание, то браузеры изначально определенным образом выравнивают содержимое ячеек таблиц. У обычных ячеек (	) содержимое выравнивается горизонтально по левой стороне и вертикально по центру, а у заголовочных (	) — в обоих случаях по центру. Для изменения выравнивания содержимого HTML-таблиц имеются атрибуты align и valign , которые указываются в тегах
и	для отдельных ячеек: Пример выравнивания в HTML-таблицах Результат в браузере Ячейка 1.1 Ячейка 1.2 Ячейка 2.1 Ячейка 2.2 Фон HTML-таблиц В старых версиях HTML у тегов таблиц был специальный атрибут bgcolor , который изменял цвет фона всей таблицы или ее части. Но в уроке Меняем цвет текста и фона мы с вами изучили универсальный способ изменения фона абсолютно любых HTML-элементов, поэтому им и пользуйтесь. А вот фонового изображения у таблиц язык HTML вообще не предусматривал, поэтому в свое время производители браузеров ввели для этого атрибут — background . Браузеры и до сих пор его понимают, но опять же, в уроке Изображения для фонов вы уже научились правильно устанавливать изображения-фоны для любых элементов. Все задание я вам расписывать не буду, обрисую только некоторые моменты, просто сделайте так, как показано в результате примера. Если вы в свое время не скачали картинки для обучения, то можете скачать сейчас. Измените фон страницы и размер шрифта. В начале страницы создайте четыре ссылки-изображения. Ниже сделайте таблицу из одного ряда и двух столбцов. Растяните ее ширину на всю страницу, сделайте выравнивание по верхней стороне ряда и измените фон каждой ячейки. Сделайте ширину левой колонки 150px и поместите в нее ссылки-изображения. Под таблицей создайте текстовые ссылки. Сделайте так, чтобы при наведении курсора мыши на любую ссылку появлялась «всплывающая» подсказка. Не забывайте про Комментарии в HTML, они серьезно помогают при работе. Ширина таблицы Журналов в базе: 11 Статей в базе: 21 Комментариев в базе: 192 На сайте человек: 1 Статья 14. Все об html таблицах. Что такое таблицы html, зачем они нужны, какие теги и атрибуты у таблиц html и многое другое Автор: Сергей Сукманюк Дата создния: 2010-07-27 1. Что такое таблицы HTML и зачем они нужны? 2. Какие теги у таблиц html? 3. Какие атрибуты есть у html таблиц? 4. Как установить размер ширины и высоты ячеек html таблицы? 5. Как выровнять текст внутри html таблицы? 6. Как выровнять текст внутри html таблицы? 7. Как убрать, добавить или изменить отступы и как задать рамку html таблице? 8. Как вставить html таблицу внутрь другой html таблицы? В этой статье мы научимся делать простые html таблицы и разберемся где они используются. 1. Что такое HTML таблицы и зачем они нужны? html таблицы — это один из самых основных составляющих каждой html странички и соответственно каждого сайта. Например, сайт uzeron.com весь состоит из таблиц: картинки, тексты, ссылки, формы регистрации – все размещено относительно друг друга при помощи таблиц html (собственно, весь сайт также расположен в одной большой таблице). 2. Какие теги у html таблиц? Теги, задающие таблицу html пишутся так: Но так как мы знаем, все таблицы состоят из строк и столбцов (ячеек), поэтому необходимо задать теги и для них: — строчка html таблицы — столбец (ячейка) html таблицы. А теперь давайте попробуем объединить все теги в одну таблицу. Для этого мы создадим html таблицу, которая состоит из двух строк и трех столбцов: Делается такая html таблица очень легко. Для начала поставим теги самой таблицы, внутрь которых помещаем необходимое количество строк (в нашем примере 2 строки): Затем каждую строку разбиваем на ячейки с помощью тегов столбцов: — ячейка 1.1 — ячейка 1.2 — ячейка 1.3 — ячейка 2.1 — ячейка 2.2 — ячейка 2.3 На самом деле, первая цифра в надписях — это номер ряда, а вторая номер ячейки (1х2 — первый ряд, вторая ячейка и т.д.). 3. Как задать фоновый цвет html таблиц? А сейчас давайте разберемся, как же задается фон таблицы или каждой ячейки отдельно. Итак, для задания фона используется атрибут bgcolor=»цвет_фона». Например, если нам необходимо задать один цвет для всей таблички, то делается это так: bgcolor=»цвет_фона»> — ячейка 1.1 — ячейка 1.2 — ячейка 1.3 — ячейка 2.1 — ячейка 2.2 — ячейка 2.3 Например, если необходимо сделать табличку желтого цвета, то мы пишем: bgcolor=»#FFFF00″> 1.1 1.2 1.3 2.1 2.2 2.3 В результате в браузере получим такую html табличку: 1.1 1.2 1.3 2.1 2.2 2.3 Если нужно задать фоновый цвет ряду html таблицы, то тогда атрибут bgcolor=»цвет_фона» применяем к тегу

bgcolor=»#FFFF00″> bgcolor=»#0000FF»> 1.1 1.2 1.3 2.1 2.2 2.3

1.1	1.2	1.3
2.1	2.2	2.3

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

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

атрибут bgcolor=»цвет_фона»:

bgcolor=»#FFFF00″> 1.1 bgcolor=»#0000FF»> 1.2 1.3 2.1 2.2 2.3

Вот какая html табличка получилась в браузере:

1.1	1.2	1.3
2.1	2.2	2.3

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

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

height — атрибут, устанавливающий высоту ячейки

width — атрибут, задающий ширину ячейки

А теперь на примере:

height=»36″ w > 1×1 w > 1.2 w > 1×3 height=»36″ w > 2.1 w > 2×2 w > 2.3

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

1×1	1.2	1×3
2.1	2×2	2.3

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

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

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

Так же, очень часто приходится задавать высоту height и ширину width в процентах:

содержимое ячейки

Если мы задаем для ячейки ширину в 40 процентов, как в нашем примере, то это значит, что на остальные ячейки у нас осталось еще 60 процентов, т.е. сумма их ширин не должна превышать 60 процентов. Все очень просто: в сумме мы имеем всего 100%. Считаем: 100 – 40 = 60.

5. Как выровнять текст внутри html таблицы?

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

Делается это с помощью атрибута:

align=”left” — выравнивает текст внутри html таблицы по левому краю

align=”center” — выравнивает текст html таблицы по центру

align=”right” — выравнивает текст внутри html таблицы по правому краю

Соответственно, атрибут align может принимать еще значения right и left. Значение justify при употреблении с тэгом

атрибут align принимать не может.

Например, код html таблицы, текст которой выровнен по центру, выглядит так:

align=»center»> > 1×1 > 1.2 > 1×3 > 2.1 > 2×2 > 2.3

Прописав атрибут align=»center» в открытии

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

Вот такой результат Вы получите в браузере:

1×1	1.2	1×3
2.1	2×2	2.3

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

Вертикальное выравнивание задается атрибутом:

valign=»top» — содержание будет располагаться вверху ячейки

valign=»middle» — содержание будет располагаться по центру ячейки

valign=»bottom» — содержание будет располагаться внизу ячейки

Давайте рассмотрим данные атрибуты на нашем примере:

> 1×1 1.2 > 1×3 > 2.1 2×2 > 2.3

Вот что мы получим, если посмотрим в браузере результат работы атрибутов align и valign:

1×1	1.2	1×3
2.1	2×2	2.3

6. Как объединить ячейки и столбцы html таблицы?

В этой части нашей статьи мы поговорим об атрибутах colspan и rowspan.

colspan — определяет количество столбцов, на которые распространяется данная ячейка

rowspan — определяет количество рядов на которые распространяется данная ячейка

Значения colspan и rowspan могут принимать значение от 2 и больше, т.е. ячейка может растягиваться на два и более столбца (ряда).

Итак, сейчас на примере мы растянем ячейку 1х1 на два столбца (ячейки). Для этого мы будем использовать атрибут colspan=»2″, прописав его для ячейки 1х1. Код будет выглядеть так:

colspan=»2″> 1.1 1.2 2.1 2.2 1.3

Вот что получилось в результате:

1.1		1.2
2.1	2.2	1.3

Как видим, ячейка 1х1 распространяется на длину двух ячеек. Соответственно, ее длина равняется суммированной длине этих двух ячеек (160 пикселей). Мы не прописали атрибут width для ячейки 1×1, но если бы мы решили это сделать, то width мы задали бы равным 160 пикселям. И еще, обратите внимание, что в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, почему – мы уже это обсудили – ячейка 1х1 равна двум ячейкам, благодаря атрибуту colspan.

С атрибутами colspan и rowspan необходимо обращаться очень аккуратно. Ошибка может привести к тому, что ваш сайт «поедет».

А теперь, когда мы разобрались с параметром colspan, давайте разберемся с параметром rowspan. Принцип действия тут тот же:

colspan=»2″> 1.1 1.2 2.1 2.2

1.1		1.2
2.1	2.2

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

7. Как убрать, добавить или изменить отступы и как задать рамку html таблице?

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

border=»ширина рамки в пикселях» — устанавливает ширину рамки

bordercolor=»цвет рамки» — устанавливает цвет рамки

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

Для этого тегу

добавляем атрибуты:

border=»1″ bordercolor=»#000000″> 1.1 1.2 2.1 2.2

Вот что получилось в браузере:

1.1		1.2
2.1	2.2

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

cellspacing=»ширина отступа в пикселях» — отступ между ячейками

cellpadding=»ширина отступа в пикселях» — отступ внутри ячейки (от края ячейки до текста, изображения, ссылки . )

Например, давайте сделаем отступ между ячейками 10 пикселей, а отступ от края ячейки до текста увеличим до 20 пикселей. Делается это так:

cellpadding=»20″cellspacing=»10″> 1.1 1.2 2.1 2.2

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

1.1		1.2
2.1	2.2

Если же необходимо вообще убрать отступы, то просто напросто поставьте cellpadding=»0″ и cellspacing=»0″.

8. Как одну html таблицу вставить внутрь другой?

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

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

Делается это очень просто:

3.1

3.2

2.1

2.2

Вот что получилось в результате новых преобразований нашей таблицы (красные ячейки — внутренняя таблица, находящаяся внутри большой таблицы):

1.1		3.1 3.2
2.1	2.2

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

Коментарии к этой статье:

Комментарий добавил(а): Kores
Дата: 2010-11-29

Круто. Вот как оказывается сайты строятся, в таблицах.

Комментарий добавил(а): xMAJORx
Дата: 2011-01-30

Спасибо тебе все понятно и логично изложено

Комментарий добавил(а): Оля
Дата: 2012-10-02

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

Комментарий добавил(а): Сергей
Дата: 2012-10-02

Оля, если честно, то мне не понятен Ваш вопрос. Какую строку Вы делите? В каких тегах Ваша строка? Лучше пришлите код таблицы.

Комментарий добавил(а): Аня
Дата: 2012-10-08

Спасибо, все очень понятно, но есть ли теги для установки цвета между ячейками?

Комментарий добавил(а): Андрей
Дата: 2015-05-20

здрасти опять же повторюсь написано хорошо благодарю за статью

Комментарий добавил(а): Иван
Дата: 2015-09-04

Агромнае спасиба за такой хароший статья, афтар пеши ищо!

Комментарий добавил(а): Swiss rolex watches
Дата: 2020-02-15

Our Swiss rolex are fitted with Deep-Sea Sealants and unique double core silicone ”O” Rings. These are made from neoprene silicon which is far more resistant to cracking, corrosion and aging that can be a problem with natural rubber. Most Grade One Rolex replica watches on the net are fitted with crude rubber sealants which generally offer poor water resistance. These also have to be regularly replaced to avoid moisture and dirt damaging the swiss replica watches . Our swiss rolex watchesare professionally sealed to keep out day to day dirt and are pressure tested to 300 meters.

Комментарий добавил(а): Бод
Дата: 2020-05-03

Спасибо, круто. Свой сайт сначала блоками делал, а они съезжают при маленьком экране или окне, вот те блоки в таблицу засунул)

Комментарий добавил(а): юзер
Дата: 2020-12-02

вот пример простого сайта с таблицами

Комментарий добавил(а): Ирина
Дата: 2014-10-11

Здравствуйте. Большое спасибо за статью. Я пытаюсь сделать станицу в dreamwiever. Никак не могу убрать зазор между картинками и таблицей. Все делаю только в HTML. Перепробовала все что вы написали, но ничего не меняется. ПОЖАЛУЙСТА, ПОМОГИТЕ! Наверное, не женское это дело. Вот мой код: Untitled Document

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

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

А мне нужно чтобы не было никаких пробелов между ячейками в строке (при этом не объединяя ячейки). Пример кода на облаке и тут:

1 ответ 1

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

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

Атрибут width HTML используется для установки ширины ячейки таблицы, которое переопределяет значение по умолчанию. Он устарел. Используйте CSS для управления разметкой ячеек в HTML таблицах .

Настройка ширины столбца таблицы

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

или отдельной строки. Посмотрим, как это делали раньше с помощью атрибута width , а затем как то же самое можно сделать с помощью CSS . Но вначале нам нужен эталон для сравнения:

Как видите, в первом случае мы не применили CSS или HTML td width . Что браузер сделает с такой таблицей?

Thin	Really Really Really Wide
Little	Lots and lots and lots and lots of content, so much that we might even need a line break.

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

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

Thin	Really Really Really Wide
Little	Lots and lots and lots and lots of content, so much that we might even need a line break.

Довольно неплохо. К сожалению, это некорректный HTML- код , поскольку HTML table width был признан устаревшим. Но можно сделать то же самое с помощью простого кода CSS :

Давайте посмотрим, как браузер выведет таблицу, использующую CSS вместо атрибута width :

Thin	Really Really Really Wide
Little	Lots and lots and lots and lots of content, so much that it will require a line break.

Регулируемая высота строки таблицы

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

Как браузер выводит этот пример:

Thin	Really Really Really Wide
Little	Lots and lots and lots and lots of content, so much that it will require a line break.

Поскольку HTML table column width устарел, мы покажем, как сделать то же самое с помощью CSS :

Браузер должен отобразить этот код практически идентично предыдущему. Давайте посмотрим, так ли это:

Thin	Really Really Really Wide
Little	Lots and lots and lots and lots of content, so much that it will require a line break.

Если честно, я не могу представить, зачем нужно контролировать высоту строки с помощью HTML td width . Гораздо больше смысла в том, чтобы настроить внешний и внутренний отступ для контента элемента

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

Этот код CSS добавляет отступы в 80 пикселей до и после, и 10 пикселей влево и вправо от каждого элемента

. Вот результат:

Thin	Really Really Really Wide
Little	Lots and lots and lots and lots of content, so much that it will require a line break.

Данная публикация представляет собой перевод статьи «

» , подготовленной дружной командой проекта Интернет-технологии.ру

HTML тег

С недавнего времени тег

стал заметно сдавать свои позиции по популярности другому тегу

Синтаксис тега

Между открывающим тегом

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

находится тело таблицы. Тело состоит из строк и столбцов. Таблица заполняется построчно.

Каждый тег

создает новую строку. Далее во вложенных создаются столбцы. Можно создавать множество столбцов. При этом нужно следить за количеством столбцов в каждой строке. Например, если в первой строке было 5 столбцов, то и в следующих строках должно быть 5 столбцов. Иначе таблица поплывет. Есть возможность объединять ячейки.

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

Приведем пример, html код:

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

Пример таблицы
Столбец 1	Столбец 2

Обратите внимание на ячейку

. Мы используем специальный атрибут colspan для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег (заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td.

Теперь рассмотрим подробно все атрибуты тега

.

Атрибуты и свойства тега

К открывающему тегу

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

1. Свойство align=»параметр» — задает выравнивание таблицы. Может принимать следующие значения:

• left — выравнивание по левому краю
• center — выравнивание по центру
• right — выравнивание по правому краю

В разобранном выше примере мы выравнивали таблицу по центру align=»center» .

Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы

. Таким образом, в разных ячейках выравнивание будет разное.

2. Свойство background=»URL» — задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.

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

или строкам

Пример таблицы
Столбец 1	Столбец 2

В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif . Обратите внимание на то, что в теге мы добавили style=»color:white;» . Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым.

Более подробно про фон читайте в статье: как сделать фон для сайта

3. Свойство bgcolor=»цвет» — задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)

4. Свойство border=»число» — задает толщину рамки таблицы. В предыдущих примерах мы указывали border=»1″ , что означает толщина рамки — 1 пиксель.

5. Свойство bordercolor=»цвет» — задает цвет рамки. Если border=»0″ , то рамки не будет и цвет рамки не будет иметь смысла.

6. Свойство cellpadding=»число» — отступ от рамки до содержимого ячейки в пикселях.

7. Свойство cellspacing=»число» — расстояние между ячейками в пикселях.

8. Свойство cols=»число» — число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.

9. Свойство frame=»параметр» — как отображать границы вокруг таблицы. Может принимать следующие значения:

• void — не отрисовывать границы
• border — граница вокруг таблицы
• above — граница по верхнему краю таблицы
• below — граница снизу таблицы
• hsides — добавить только горизонтальные границы (сверху и снизу таблицы)
• vsides — рисовать только вертикальные границы (слева и справа от таблицы)
• rhs — граница только на правой стороне таблицы
• lhs — граница только на левой стороне таблицы

10. Свойство height=»число» — задает высоту таблицы: либо в пикселях, либо в процентах.

11. Свойство rules=»параметр» — где отображать границы между ячейками. Может принимать следующие значения:

• all — линия рисуется вокруг каждой ячейки таблицы
• groups — линия отображается между группами, которые образуются тегами , , , или
• cols — линия отображается между колонками
• none — все границы скрываются
• rows — граница рисуется между строками таблицы, созданными через тег

12. Свойство w — задает ширину таблицы: либо в пикселях, либо в процентах.

13. Свойство — можно указать имя класса, которому принадлежит таблица.

14. Свойство style=»стили» — стили можно задать индивидуально для каждой таблицы.

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

.

Атрибуты и свойства и

1. Свойство align=»параметр» — задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения:

• left — выравнивание по левому краю
• center — выравнивание по центру
• right — выравнивание по правому краю

2. Свойство background=»URL» — задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения.

3. Свойство bgcolor=»цвет» — задает цвет фона ячейки.

4. Свойство bordercolor=»цвет» — задает цвет рамки ячейки.

5. Свойство char=»буква» — задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char.

6. Свойство colspan=»число» — задает число объединяемых горизонтальных ячеек.

7. Свойство height=»число» — задает высоту таблицы: либо в пикселях, либо в процентах %.

8. Свойство w — задает ширину таблицы: либо в пикселях, либо в процентах %.

9. Свойство rowspan=»число» — задает число объединяемых вертикальных ячеек.

10. Свойство valign=»параметр» — выравнивание содержимого ячейки по вертикали.

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

Примечание 1

Для тега

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

Как сделать, чтобы границы ячеек в таблице не склеивались

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

Более подробно про это свойство читайте в специальной статье border-collapse CSS

Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.

Фиксируем размер ячеек HTML таблицы с помощью CSS3

Фиксированный размер ячеек через CSS

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

). С помощью CSS все это можно сделать гораздо легче.

И так, допустим у нас есть таблица со списком исполнителей электронной музыки:

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

Как можно догадаться, table td:nth-of-type(1), table td:nth-of-type(2) и table td:nth-of-type(3) содержат цифры колонок, а параметр width отвечает за их ширину.

Важный совет — если у вашей таблицы задан свой определенный класс, то лучше использовать его в таблице CSS, потому что в противном случае данные размеры применятся на любые таблицы, которые расположены на страницах, где используется данный css файл. Допустим, у вашей таблицы следующий код, в котором видно, что класс таблицы — music:

3.5. Ширина и высота таблицы и ячеек

3.5. Ширина и высота таблицы и ячеек

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

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

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

На рис. 3.9 и 3.10 изображены две таблицы одинакового содержания, но разной ширины и высоты.

Рис. 3.9. Ширина таблицы равна 80 % от ширины окна браузера

Рис. 3.10. Ширина и высота таблицы равна 300 пикселам

Ширина первой таблицы равна 80 % от размера окна браузера, а первый столбец этой таблицы занимает 50 % от всей ширины таблицы. Высота первой строки равна 100 пикселам.

Вторая таблица квадратная, ширина стороны равна 300 пикселам. В листингах 3.4 и 3.5 приведены коды страниц, содержащих описанные таблицы.

Листинг 3.4. Код таблицы шириной 80 % от ширины окна браузера

Ширина таблицы HTML в процентах, строки таблицы разделены одинаково

Когда я создаю таблицу в html, таблицу шириной 100%, если я хочу, чтобы все ячейки (tds) были разделены на равные части, мне нужно ввести ширину% для каждой ячейки? «Я обязан» сделать это?

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

Я знаю, что это работает с обоими манерами, но я просто хочу знать «законный» способ сделать это.

Вам нужно ввести ширину% для каждой ячейки. Но подождите, там лучший способ сделать это, он называется CSS:

Используйте свойство table-layout:fixed; в таблице, чтобы получить ячейки с равномерным распределением. Если столбец имеет ширину, то независимо от того, что это за контент, это будет указанная ширина. Столбцы без набора ширины будут разделять любую комнату, оставшуюся между собой.

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

HTML таблицы — тег table

Создание таблиц в html

Таблица — один из основных инструментов для создания web-страниц.

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

Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Например:

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

столбец 1	столбец 2	столбец 3
первый столбец первой строки	второй столбец первой строки	третий столбец первой строки
первый столбец второй строки	второй столбец второй строки	третий столбец второй строки
первый столбец третьей строки	второй столбец третьей строки	третий столбец третьей строки

Рассмотрим нашу таблицу с точки зрения HTML:

сама таблица задается с помощью тегов ,

у таблицы есть название — теги ,

таблица состоит из строк — теги ,

каждая строка состоит из столбцов — теги ,

столбцы имеют названия, расположенные в первой строке — теги .

Создадим таблицу, где в качестве содержимого укажем пересечение номеров строк и столбцов: