Как сделать чтобы таблица не растягивалась html
Добавил пользователь Alex Обновлено: 05.10.2024
Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:
Продолжаю рассказывать о таблицах в HTML и сегодня об одном из наиболее часто встречающемся вопросе - о том, как выровнять текст в ячейке таблицы и как сделать отступы между текстом и границами ячейки.
Если вы создадите простую таблицу, как это мы делали здесь, то она будет не очень красивой - текст будет расположен очень близко к границам ячеек. И это будет особенно неприятно, если границы таблицы не прорисованы - тогда получится, что текст в разных ячейках просто сольётся в один сплошной.
Этого можно избежать, если использовать определённые атрибуты таблицы: cellpadding и cellspacing .
Кроме того, часто требуется выровнять текст в ячейке по той или иной границе (по умолчанию текст выравнивается по левому краю по горизонтали и по середине по вертикали). Выровнять текст можно с помощью атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание, поддерживается не всеми браузерами). Пример:
В комментариях имеются некоторые пояснения. Ну а вообще здесь разъяснять особо нечего. Разве что стоит упомянуть про атрибуты width и height , которые задают ширину и высоту таблицы соответственно для того, чтобы мы могли чётко увидеть, как работает выравнивание в ячейках.
Вот так примерно эта таблица будет выглядеть на экране:
А теперь про отступы в ячейках и от границ таблицы. В примере выше нам пришлось использовать атрибуты width и height , потому что без этого ячейки были бы расположены вплотную друг к другу, а текст в ячейках также был бы вплотную к границам ячеек. И мы не смогли бы увидеть работу атрибутов выравнивания текста.
Чтобы устранить эту неприятность, а также сделать таблицу более красивой, где текст в разных ячейках не сливается в одну строку, можно использовать следующие атрибуты:
- cellpadding - задаёт отступ от границы ячейки до текста
- cellspacing - задаёт отступ между ячейками и от ячеек до границы таблицы
Чтобы лучше понять, как это работает, посмотрите рисунок:
Для лучшего понимания посмотрите видео (выше) и изучите курс о вёрстке сайтов.
Таблица — это сетка из ячеек, формирующих строки и столбцы. Примерами таблиц могут служить различные финансовые отчеты, результаты спортивных соревнований, календари, расписания и т.д. Отдельный блок сетки называется ячейкой таблицы. Ячейки таблицы могут содержать самую разнообразную информацию, включая числа, текст, и даже видео и аудио объекты. С помощью языка HTML таблицы пишутся построчно.
Рассмотрим простую таблицу, которая состоит из трех строк и трех столбцов, причем ячейки первой строки будут заголовками соответствующих столбцов. По умолчанию таблицы обычно отображаются без рамки:
Пример: Простая HTML-таблица
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Ячейка 2x1 | Ячейка 2x2 | Ячейка 2x3 |
| Ячейка 3x1 | Ячейка 3x2 | Ячейка 3x3 |
Граница таблицы
Мы уже знаем, что по умолчанию таблицы отображаются без рамки. Для добавления рамки вокруг таблицы нужно указать в документе несколько простых правил таблиц стилей. Свойство border управляет отображением линий сетки таблицы, а также задает толщину рамки вокруг таблицы в пикселах. Рамка отображается вокруг таблицы и между ячейками. Добавим к уже созданной таблице рамку толщиной один пиксель, установив свойство border для всех элементов таблицы, например, вот так:
Пример: Применение свойства border
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Ячейка 2x1 | Ячейка 2x2 | Ячейка 2x3 |
| Ячейка 3x1 | Ячейка 3x2 | Ячейка 3x3 |
| Свойство border следует устанавливать как для самой таблицы так и для её ячеек и . |
Одинарная рамка для таблицы
Пример: Применение свойства border-collapse
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Ячейка 2x1 | Ячейка 2x2 | Ячейка 2x3 |
| Ячейка 3x1 | Ячейка 3x2 | Ячейка 3x3 |
Поля и интервалы таблицы
По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS. Поле ячейки (padding) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу или . Интервал ячеек (border-spacing) — это расстояние между ними ( или ). Сначала присвойте значение separate свойству border-collapse элемента , а затем установите расстояние между ячейками, изменив значение параметра border-spacing. Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента , но в спецификации HTML5 они были признаны устаревшими.
Пример использования padding и border-spacing:
Пример: Применение свойств padding и border-spacing
| Примечание: Если к таблице применено свойство border-collapse: collapse, то интервал ячеек (border-spacing) не сработает. |
Ширина таблицы
Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет "растягиваться" или "сжиматься" в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера.
Вот пример использования свойства width:
Пример: Применение свойства width
Объединение ячеек (colspan и rowspan)
Одной из основных особенностей структуры таблицы является объединение ячеек, которое подразумевает растяжение ячейки и охват ею нескольких строк или столбцов. Это позволяет создавать сложные табличные структуры: заголовки или ячейки объединяются посредством добавления атрибутов colspan или rowspan. Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan — по вертикали.
Объединение столбцов
Объединение столбцов достигается с помощью атрибута colspan в элементах или — ячейка растягивается вправо, охватывая последующие столбцы. В следующем примере значение атрибута colspan равно 2, а это значит, что ячейка должна занимать два столбца.
Пример: Применение атрибута colspan
| Ячейка на два столбца | |
|---|---|
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Объединение строк
Строки, объединенные при помощи атрибута rowspan, ведут себя точно так же, как объединенные столбцы, с той лишь разницей, что диапазон ячеек задается сверху вниз и охватывает несколько строк.
В этом примере первая ячейка таблицы растягивается на две строки вниз:
Пример: Применение атрибута rowspan
| Ячейка на две строки | Ячейка 1 | Ячейка 2 |
|---|---|---|
| Ячейка 3 | Ячейка 4 |
Заголовок таблицы
Для создания заголовка или подписи таблицы используется парный тег (от англ. caption – подпись). Элемент предназначен для организации заголовка таблицы. Располагается сразу после тега , но вне описания строки или ячейки.
Пример: Применение тега
| Ячейка на две строки | Ячейка 1 | Ячейка 2 |
|---|---|---|
| Ячейка 3 | Ячейка 4 |
Теги группирования элементов таблиц
Пример: Теги , и
| Это шапка таблицы | |||
|---|---|---|---|
| Это подвал таблицы | |||
| Ячейка 1 | Ячейка 2 | Ячейка 3 | Ячейка 4 |
Несмотря на то, что мы перед добавили , он, тем не менее, появляется в конце таблицы. Это исходит из того, что может содержать много строк. Но браузеру нужно отобразить нижнюю часть таблицы до получения всех (потенциально многочисленных) строк данных. Вот почему в коде прописывается перед элементом .
Задачи
Объединение столбцов
Напиште разметку для таблицы, изображенной на рис.1.
Задача HTML:
Объединение строк
Напиште разметку для таблицы, изображенной на рис.1.
Задача HTML:
Убрать двойную рамку таблицы
По умолчанию граница таблицы имеет эффект двойной рамки, измените код так, чтобы все линии этой рамки стали одинарными.
Задача HTML:
Широкая таблица
Сделайте чтобы эта таблица отображалось полностью на всю ширину окна браузера вне зависимости от ее ширины.
Задача HTML:
Заголовок таблицы
Измените приведенный код так, чтобы над таблицей появился основной заголовок (подпись), как показано на рис.1.
Задача HTML:
Поле внутри ячеек
Измените приведенный код так, чтобы между текстом внутри ячеек и их границей появился зазор (поле) шириной 25px, как показано на рис.1.
Задача HTML:
Объединение строк
Потому-что она растягивается бл*. Это бл*ть закон физики.
А вообще, потому-что наверняка там ширина стоит стопроцентная, а можно указать фиксированную в пикселях и все будет оки доки.
Потому-что она растягивается бл*. Это бл*ть закон физики.
А вообще, потому-что наверняка там ширина стоит стопроцентная, а можно указать фиксированную в пикселях и все будет оки доки.
, которому и укажите width:300px
Не за что, это не правильное решение.
overflow:hidden - весь "распирающий" текст просто скроет, это же не выход
Powered by vBulletin Version 3.8.4
Copyright © 2000-2020 Jelsoft Enterprises Ltd.
SEO by vBSEO 3.3.2 ©2009, Crawlability, Inc.
При создании таблицы (в ноде), будь то с тегом width (с указанием ширины в процентах или в пикселях), либо без этого тега, таблица растягивается на всю ширину страницы.
Пробовал разные темы оформления, включая стандартные.
Если этот же код сохранить как статичную html-страничку и зайти на неё -- таблица отображается как надо.
Пример покорёженной Друпалом таблицы:
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
| Ячейка 5 | Ячейка 6 |
table width = "70%" border = "1" cellspacing = 0 cellpadding = 2 >
tr > td > Ячейка 1 / td > td > Ячейка 2 / td > / tr >
tr > td > Ячейка 3 / td > td > Ячейка 4 / td > / tr >
tr > td > Ячейка 5 / td > td > Ячейка 6 / td > / tr >
/ table >
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
| Ячейка 5 | Ячейка 6 |
table width = 200 border = "1" cellspacing = 0 cellpadding = 2 >
tr > td > Ячейка 1 / td > td > Ячейка 2 / td > / tr >
tr > td > Ячейка 3 / td > td > Ячейка 4 / td > / tr >
tr > td > Ячейка 5 / td > td > Ячейка 6 / td > / tr >
/ table >
Комментарии
PS: на сайте обе таблицы выглядят вот так:
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
| Ячейка 5 | Ячейка 6 |
фильтр переносов строк будь он неладен, больше чем уверен. Используйте Full HTML
Прошу прощения, забыл уточнить: установлен Full HTML
А если как-то так:
Прежде чем писать про нерабочесть тега посмотрите фаербагом что передавливает Ваши свойства из таблиц, это может быть какой-либо JS или файл CSS который грузится самым последним или еще что-то так судить сложно. Или больного в студию или firebug вам в помощь.
Всем спасибо за советы
Буду учить HTML и разбираться в CSS.
проверьте исходный код страницы на присутствие тэгов
промеж tr и td
1. В стиле стандартной темы для таблицы без класса определен width:100%
2. В коде первого примера ошибка, атрибут width задается ТОЛЬКО в пикселях, а не в процентах.
Использую редактор bueditor вставляю вот такой код:
table width= "70%" border= "1" cellspacing= 0 cellpadding= 2 >
tr > td > Ячейка 1 td > td > Ячейка 2 td > tr >
tr > td > Ячейка 3 td > td > Ячейка 4 td > tr >
tr > td > Ячейка 5 td > td > Ячейка 6 td > tr >
table >
Как правильно сделать построчное чтение txt файла, чтобы потом эти данные выводились в теге ?
У меня есть файл file.txt: Саша 12 руб. Рома 76 руб. Петя 120 руб. Маша 234 руб. Я пытаюсь.
Как правильно задать размер JPanel чтобы JFrame при pack() сжимался до размеров JPanel
Подскажите как правильно задать размер JPanel чтобы JFrame при pack() сжимался до размеров JPanel.
как запретить изменение размера таблицы в зависимости от содержимого
Используйте — table-layout: fixed; таблица делится на колонки равной ширины. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.
HTML CSS как остановить расширение ячейки таблицы
У меня есть таблица, которая построена с содержимым, поступающим из возвращаемого набора данных. То, что я хочу сделать, это остановить ячейку "описание" от расширения по ширине 280px, независимо от длины содержимого (его строки s). Я пробовал:
но это, похоже, не работает. Я не хочу, чтобы он обернулся, и я не хочу, чтобы что-либо над 280px отображалось.
похоже, что ваш синтаксис HTML неверен для ячейки таблицы. Прежде чем попробовать другую идею ниже, подтвердите, работает ли это или нет. Вы также можете попробовать добавить это в свою таблицу: table-layout: fixed.. .
новый HTML
класс CSS:
Я знаю, что это старая школа, но попробуйте, это работает.
может также добавить это:
конечно, вы бы поместили это в отдельную связанную таблицу стилей, а не встроенную. не так ли 😉
вы не можете контролировать ширину ячейки таблицы ( td ) Если вы не обернете его содержимое внутри элемента управления контейнером, как div . Следующая функция jQuery обернет содержимое каждого td внутри div.
эта функция обернет содержимое каждого td элемент внутри div — тег. Ширина div тег будет установлен на ширину соответствующего th элемент.
структура таблицы образца:
нет javascript, только CSS. Отлично работает!
Это может быть полезно, Так как ответ выше-это просто css:
вполне возможно, если ваш код достаточно относительная логика для работы.
просто используйте единицы просмотра, хотя для некоторых математика может быть немного сложнее. Я использовал это, чтобы предотвратить раздувание определенных столбцов таблицы с более длинным текстом.
видимо max-width on colgroup элементы do не работа, которая довольно хромает, чтобы полностью зависеть от дочерних элементов для управления чем-то на родитель.
Читайте также: