Как сделать фиксированный размер ячейки html
Обновлено: 06.07.2024
Рассмотрим несколько свойства CSS, определяющих некоторые особенности отображения ячеек таблицы.
Общие границы
Одним из таких свойств CSS является свойство border-collapse . Оно определяет характер отображения границ ячеек и границы таблицы.
По умолчанию свойство border-collapse имеет значение separate . При этом каждая ячейка, также как и таблица, имеет собственную границу.
При значении collapse свойства border-collapse ячейки таблицы имеют общие границы в том числе и с таблицей.
| Индивидуальная граница | У каждой ячейки | И у таблицы. |
| Общие границы | У ячеек между собой | И у ячеек с таблицей. |
Расстояние между ячейками
В случае, когда и таблица, и каждая ячейка имеют собственные границы (при значении separate свойства border-collapse ), к таблицам применимо свойство border-spacing , позволяющее задать расстояние между границами ячеек, в том числе и расстояние между границами ячеек и границей таблицы.
Расстояние задается в пикселях. Если указано одно значение, тогда расстояние между всеми ячейками одинаковое; если два, то первое значение задает расстояние между ячейками по вертикали, а второе - по горизонтали.
Свойство применимо к таблицам.
Свойство не поддерживается Internet Explorer до версии 8.0 .
| Расстояние между всеми ячейками одинаковое | Также как и расстояние между ячейками и границей таблицы | И составляет 20 пикселей. |
| Вертикальные расстояния | Составляют 20 пикселей | Горизонтальные - 5 пикселей. |
Пустые ячейки
Свойство empty-cells позволяет скрыть пустые ячейки, но опять же лишь при значении separate свойства border-collapse .
По умолчанию граница и фон пустых ячеек отображены. При значении hide свойства empty-cells граница и фон будут скрыты.
При этом, если все ячейки строки являются пустыми, то вся строка будет скрыта, но ее место остается за ней.
Размеры ячеек и столбцов тоже можно задавать вручную, особенно если вам не нравится, как браузер распределил ширину колонок. Размеры ячеек задаются точно так же, как и размеры таблицы: с помощью CSS-свойств width и height .
Есть два варианта добавления стилей ячейкам:
Назначать ячейкам уникальные имена классов, например, class="cell-11" , и применять стили для этих классов.
Использовать атрибут style , внутри которого можно писать CSS-код.
Пример второго варианта:
К счастью, редко нужно задавать размеры каждой ячейки. Обычно размеры ячеек прописывают, когда надо вручную установить ширину столбцов таблицы: для этого достаточно задать ширину для каждой ячейки из первой строки.
В этом задании вы зададите ширину столбцов, используя атрибут style . А также увидите отличия между шириной столбцов по умолчанию и заданной вручную.
Сегодня вы познакомитесь с еще одним очень мощным элементом создания сайтов — 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-таблицу по центру или справа.
В прошлом у тега имелся атрибут align , с его помощью и можно было изменять положение таблицы. Но он стал устаревшим, и сколько еще времени его будут поддерживать браузеры — неизвестно, так как на смену пришли стили (CSS). И чтобы показать вам правильный метод, я использую атрибут style .
Пример расположения таблицы по центру
Результат в браузере
| Ячейка 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-таблиц и ячеек
Результат в браузере
Как вы уже знаете, по умолчанию браузеры не отрисовывают рамки у таблиц, поэтому, чтобы вы четко увидели картину изменения ширины, я установил атрибут border , о котором мы поговорим чуть позже.
Изменение высоты HTML-таблиц и ячеек
В стандартном HTML у тега нет атрибута для изменения высоты таблицы, браузеры ее автоматически высчитывают исходя из содержимого. А вот у стилей (CSS) такая возможность есть, поэтому их и будем использовать.
А вот для изменения высоты ячеек в HTML у тегов и все-таки был атрибут height (вот и пойми этих разработчиков), но он устарел, поэтому снова стили.
Как и для ширины, используйте пиксели (px) или проценты (%), но здесь есть один момент. Когда вы указываете процентную запись, то конечно высота высчитывается исходя из размеров таблицы, поэтому если высота блока не указана — браузеры проигнорируют значения для ячеек.
Ну и естественно браузеры проигнорируют ваши размеры, как для таблицы в целом, так и для ячеек, если содержимое не будет вмещаться.
В HTML-таблицах высота строки (как и ширина столбца) всегда равна высоте ее самой высокой ячейки. Поэтому, меняя высоту одной (любой) ячейки — вы меняете высоту всей строки.
Пример изменения высоты HTML-таблиц и ячеек
Результат в браузере
Выравнивание в HTML-таблицах
Если вы обратили внимание, то браузеры изначально определенным образом выравнивают содержимое ячеек таблиц. У обычных ячеек ( ) содержимое выравнивается горизонтально по левой стороне и вертикально по центру, а у заголовочных ( ) — в обоих случаях по центру.
Для изменения выравнивания содержимого HTML-таблиц имеются атрибуты align и valign , которые указываются в тегах для рядов (строк) или и для отдельных ячеек:
Пример выравнивания в HTML-таблицах
Результат в браузере
Фон HTML-таблиц
В старых версиях HTML у тегов таблиц был специальный атрибут bgcolor , который изменял цвет фона всей таблицы или ее части. Но в уроке Меняем цвет текста и фона мы с вами изучили универсальный способ изменения фона абсолютно любых HTML-элементов, поэтому им и пользуйтесь.
А вот фонового изображения у таблиц язык HTML вообще не предусматривал, поэтому в свое время производители браузеров ввели для этого атрибут — background . Браузеры и до сих пор его понимают, но опять же, в уроке Изображения для фонов вы уже научились правильно устанавливать изображения-фоны для любых элементов.
Все задание я вам расписывать не буду, обрисую только некоторые моменты, просто сделайте так, как показано в результате примера. Если вы в свое время не скачали картинки для обучения, то можете скачать сейчас.
Если на одной странице или на сайте присутствует несколько таблиц и для них требуется установить разное стилевое оформление, то для таких таблиц добавляется атрибут class или id с соответствующим значением, например:
При этом class="list" можно будет использовать для оформления других таблиц (элементов), а id="company" — только для одной таблицы.
2. Как добавить ссылки в таблицу
Ячейки таблицы могут содержать практически любые элементы. Чтобы вставить ссылку в ячейку, нужно добавить в нее элемент с текстом ссылки, например:
Стилизовать такие ссылки можно при помощи определения table a <> , или же задав класс непосредственно для ссылки.
3. Как создать ссылки на ячейки таблицы
Ссылка на ячейку таблицы создается при помощи якоря. Для этого нужной ячейке добавляется атрибут id со значением, например:
Чтобы обеспечить переход со ссылки на эту ячейку, задаём ей соответствующее значение пути
Если переход осуществляется с одной страницы сайта на другую, якорь добавляется после адреса страницы, например:
Для наглядности результат перехода можно выделить, например, сменить цвет фона ячейки, цвет текста ячейки, добавить подчеркивание и т.д.
Пример
Таблица составлена на основе рейтинга зрителей. Перейдя по этой ссылке, вы узнаете какой фильм мой самый любимый.
| Фантастика | Комедия | Приключения |
|---|---|---|
| Марсианин | Самый лучший день | Миссия невыполнима: Племя изгоев |
| Мстители: Эра Альтрона | Пиксели | Агенты А.Н.К.Л. |
| Голодные игры: Сойка-пересмешница | Барашек Шон | Последние рыцари |
4. Одинаковая ширина колонок таблицы
По умолчанию ширина таблицы определяется содержимым ее ячеек. Управлять шириной столбцов (ячеек) можно следующими способами:
- Если для таблицы задана ширина, то table сделает все ячейки одинаковой ширины, исходя из ширины самой длинной ячейки.
- Если для таблицы задана ширина table , и ширина ячеек вычисляется в % , например, td , то ширина всех ячеек будет равной.
- Задав фиксированную ширину с помощью единиц длины, например, th .
При этом не забывайте, что к ширине таблицы будет добавлена ширина границы ячеек и таблицы и внутренние отступы ячеек padding (если не установлено свойство ).
5. Оформление заголовка таблицы
Управлять положением заголовка можно свойством caption-side , например, caption поместит заголовок после таблицы.
По сути заголовок является ячейкой таблицы, поэтому для него можно задавать те же свойства, что и для ячеек таблицы, т.е.
6. Создание вложенных таблиц
Чтобы вложить одну таблицу в другую, нужно поместить код вложенной таблицы в выбранную ячейку основной таблицы, например:
Вложенные таблицы могут содержать любое количество строк и ячеек. Для них можно устанавливать любые свойства, отличные от значений основной таблицы, размещать в ячейках изображения, а также другие таблицы.
CSS стиль table-layout определяет, как браузеру нужно вычислять ширину ячеек таблицы, основываясь на ее содержимом.
Краткая информация по CSS-свойству table-layout
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Нет |
| Применяется | К тегу или к элементу, у которого значение display установлено как table или inline-table. |
Правила написания свойства table-layout
При выбранном значении auto браузер загружает всю таблицу, после чего анализирует ее для определения размеров ячеек и лишь после этого показывает на странице.
Объектная модель
Пример применения стиля table-layout
Проиллюстрируем работу table-layout на примере. Нам нужно, чтобы ширина ячеек не зависела от содержимого.
Читайте также: