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

Как изменить размер рамки в html

  • автор:

Длина рамки CSS

alt text

Как сделать рамку длиннее или наоборот?

Отслеживать

51.4k 88 88 золотых знаков 269 269 серебряных знаков 508 508 бронзовых знаков

задан 21 мар 2012 в 14:34

190 2 2 золотых знака 5 5 серебряных знаков 15 15 бронзовых знаков

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

Рамка вокруг изображений

Для добавления вокруг изображения цветной рамки применяется стилевое свойство border . В стилях добавляем это свойство к селектору img и указываем толщину рамки, её цвет и стиль. Тогда рамка добавится для всех изображений на странице. Для выбранных рисунков можно ввести собственный класс и писать его только для выбранных элементов (пример 1).

Пример 1. Добавление рамки

Изображения .border

В данном примере к двум изображениям добавляется класс border , через который устанавливается зелёная рамка (рис. 1).

Рамка вокруг фотографий

Рис. 1. Рамка вокруг фотографий

Рамку можно добавлять и при наведении курсора на изображение через псевдокласс :hover . Но это ожидаемо приведёт к сдвигу картинки, поскольку свойство border влияет на общую ширину и высоту элемента. Чтобы избежать такого поведения к селектору img предварительно добавляется невидимая рамка, как показано в примере 2.

Пример 2. Рамка вокруг изображений

Изображения

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

img:hover < outline: 3px solid #00af64; /* Цветная рамка */ >

Несмотря на схожесть этих свойств, у них есть небольшие различия:

  • outline выводится вокруг элемента ( border внутри);
  • outline не влияет на размеры элемента ( border добавляется к ширине и высоте элемента);
  • outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах ( border можно использовать для любой стороны или всех сразу);
  • на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Ещё один способ создания рамки заключается в добавлении фона к . Сам фон сразу не виден, поэтому надо установить ещё свойство padding , его значением выступает толщина рамки (пример 3).

Пример 3. Использование background и padding

Сюда же можно включить свойство border и получить новый вид рамки. Вообще, комбинируя padding , border , outline и background можно сделать множество самых разнообразных рамок.

См. также

  • border
  • Блочные элементы
  • Добавление треугольника
  • Колесо для сокращённых свойств
  • Открываем блочную модель
  • Оформление ссылок
  • Повёрнутые рамки
  • Свойство border
  • Строчные элементы

Рамки и линии CSS/HTML

Рамки и линии CSS/HTML

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

Рамка для блока CSS

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

Пример

HTML

CSS

 .block-border < width: 100px; height: 100px; border: 2px solid #f66d52; /* Параметры рамки */ background: #ccc; /* Цвет фона */ >

Рамка внутри блока или картинки при наведении

Чтобы рамка появлялась внутри блока или картинки можно использовать свойство outline-offset. С помощью него можно задать расстояние от края элемента до рамки. Отрицательное значение отображает рамку внутри элемента, положительное — вокруг элемента.

Пример

HTML

  

CSS

 img:hover < outline: 2px dashed #3d1f15; /* Ширина, вид и цвет рамки */ outline-offset: -10px; /* Выводим рамку внутри элемента */ >

Рамка к изображению при наведении

Такая рамка может пригодиться в галерее, а так же если нужно выделить то или иное изображение при наведении. Рамка вокруг изображений делается с помощью свойства border, которое добавляется к селектору img. Чтобы рамка появлялась только при наведении курсора мыши на картинку, следует воспользоваться псевдоклассом :hover.

Пример

HTML

  

CSS

 img:hover < border: 3px solid #413f3f; /* Ширина, вид и цвет рамки */ >

Как добавить вертикальную линию к тексту

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

Html толщина таблицы – Задаём размеры отдельных ячеек и столбцов — Знакомство с таблицами — HTML Academy

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

Рис. 1. Таблица с трехмерной рамкой

Для создания указанной таблицы вынесем все возможные параметры в стили, а добавление рамки возложим на атрибут border (пример 1).

Пример 1. Использование атрибута border

    Таблица    
 200420052006
Рубины435179
Изумруды283448
Сапфиры295736

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

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

В примере 2 для добавления рамки используется стиль со значением groove и толщиной 5 пикселов. Вид полученной таблицы показан на рис. 2.

Рис. 2. Разделение ячеек таблицы

Стилевое свойство border применяется к селектору TABLE для создания рамки вокруг таблицы и к селекторам TD и TH для добавления рамки к каждой ячейки. При этом чтобы не возникало двойных линий в местах соприкосновения разных ячеек, используется свойство border-collapse со значением collapse (пример 2).

Пример 2. Создание рамки с помощью стилей

    Таблица    
 200420052006
Рубины435179
Изумруды283448
Сапфиры295736

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

Мы можем сами создать эффект трехмерности таблицы за счет правильного чередования темных и светлых линий в ее строках (рис. 3).

Рис. 3. Таблица с «выдавленными» строками

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

Для создания приведенной на рис. 3 таблицы введем дополнительный класс с именем even, и будем добавлять его к четным строкам таблицы. При этом для селектора TR нельзя напрямую установить свойство border, линия в этом случае отображаться просто не будет. Поэтому воспользуемся контекстными селекторами и добавим конструкцию .even TD, которая говорит, что для всех ячеек расположенных внутри элемента с классом even задаем линию снизу и сверху. Цвет фона с помощью свойства background допускается применять к селектору TR, что и показано в примере 3.

Пример 3. Выделение строк таблицы

    Таблица    
 200420052006
Рубины435179
Изумруды283448
Сапфиры295736

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

Таблица html

Таблица html ,теги таблицы, столбцы таблицы, строки таблицы – это сегодня будем разбирать!

И конечно же будет множество примеров таблиц тех или иных видов и разновидностей…

Теги таблицы html

Начнем с тегов таблицы — таблица в html обознается двойным тегом «table»

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

Как обозначаются строки в таблице html

Строка в таблице обозначается двойным тегом «tr»

И вспомнил, что ведь есть еще внутри двойной тег «tbody» — который я позабыл, как уже вставлял в таблицу, но он существует и его нужно использовать по правилам, но если вы , как я забудете его использовать, то браузер допишет этот тег самостоятельно…

В каждой строке

Ну что — вот так она должна выглядеть таблица по всем правилам…

Строка 1 Строка 2 Строка 3

И мы сможем уже посмотреть на эту таблицу:

Строка 1
Строка 2
Строка 3

И ваше изумление — я вижу на вашем лице — потому, что ничем от обыкновенного текста это не отличается, но если мы сделаем видными её бордюры, то вид изменится сильно!

Либо создаем css файл и добаляем выделенный код без первой и последней строки, либо добавляем весь код на странице до тега

border: 1px solid black;

Строка 1
Строка 2
Строка 3

Теперь добавим еще одни столбец, надо в теге tr — продублировать теги td:

Строка 1 — первого столбца

Строка 1 — второго столбца

Строка 2

Строка 2

Строка 3

Строка 3

Вот в итоге у нас получилась таблица, с двумя столбцами и тремя строками…:

Строка 1 — первого столбца Строка 1 — второго столбца
Строка 2 Строка 2
Строка 3 Строка 3

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

Ширина может задаваться несколькими способами…

1. Внутри тега table прописываем ширину:

Строка 1 +
Строка 2
Строка 3

2. На самой странице до тега

border: 1px solid black;

3. В файле css без первой и последней строки предыдущего выделенного кода.

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

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

Для примера давайте возьмем 70%

border: 1px solid black;

Строка 1 +
Строка 2
Строка 3

Или пример с двумя столбцами — вся ширина таблицы — возьмем 100%, а столбцы разделим на 70% + 30% — если вы помещаете в таблицу, то будет вид такой…

Строка 1 — первого столбца + width=»70%»

Строка 1 — второго столбца +

Строка 2

Строка 2

Строка 3

Строка 3

Строка 1 — первого столбца + Строка 1 — второго столбца +
Строка 2 Строка 2
Строка 3 Строка 3

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

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

border: 1px solid black;

Строка 1 — первого столбца + стиль=»70%»

Результат будет аналогичный предыдущему способу…

Высота строки таблицы html

Кроме высоты — можно задать высоту строки таблицы…

Строка 1 — первого столбца + width=»70%»

Строка 1 — второго столбца +

Строка 2 +

Строка 3 +

Строка 3

Строка 1 — первого столбца + Строка 1 — второго столбца +
Строка 2 + Строка 2
Строка 3 + Строка 3

Вас может еще заинтересовать список тем : HTML , CSS , TABLE , Теги:
таблица htmlячейки таблицы htmlкак сделать таблицу в htmlтеги html таблицаhtml код таблицыстрока таблицы htmlтекст в таблице htmlтаблица html cssтаблицы html примерысоздание таблицы в htmlширина таблицы htmlhtml страница таблицатаблица по центру htmlhtml столбцы таблицыкак вставить таблицу в htmlкак создать таблицу в htmlтаблица в блокноте html

Особенности таблиц | htmlbook.ru

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

Вложенные таблицы

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

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

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

  • ширина содержимого ячеек;
  • толщина всех границ между ячеек;
  • поля вокруг содержимого, устанавливаемые через атрибут cellpadding;
  • расстояние между ячейками, которое определяется значением cellspacing.

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

Пример 2.1. Использование table-layout

XHTML 1.0CSS 2.1IECrOpSaFx

    Таблица TABLE < table-layout: fixed; /* Ячейки фиксированной ширины */ >TD.dino  
.

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

а. Вид таблицы в IE6, IE7, Firefox 2

б. Вид таблицы в IE8, IE9, Firefox 3, Firefox 4, Safari и Chrome

Рис. 2.1. Использование table-layout

Сделать единообразный вид таблицы во всех браузерах легко, для этого к ячейке с рисунком следует добавить свойство overflow со значением hidden. При этом всё, что не помещается в ячейку, будет «обрезано», как продемонстрировано на рис. 2.1а. Стиль в этом случае изменится незначительно.

TABLE < table-layout: fixed; /* Ячейки фиксированной ширины */ >TD.dino

Высота ячеек

Ячейки в одной строке взаимосвязаны и их высота одинакова. Это позволяет делать макеты с колонками одной высоты. В примере 2.2 приведён такой макет, в котором, несмотря на разную высоту контента, колонки равны по высоте.

Пример 2.2. Колонки одной высоты

XHTML 1.0CSS 2.1IE 9CrOpSaFx

    Высота ячеек    

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

Бульон процедить, мясо нарезать кусочками. В бульон добавить нарезанный дольками картофель, довести до кипения, опустить нарезанную соломкой свежую капусту и варить 10-15 минут, добавить пассерованные овощи, болгарский перец, нашинкованный тонкой соломкой, специи и довести до готовности.

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

Борщ

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

Рис. 2.2. Макет, созданный с использованием таблицы

В данном примере в ячейках разное содержание, но высота ячеек одинакова.

Порядок ячеек

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

Рис. 2.3. Порядок создания ячеек

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

Загрузка таблицы

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

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

seodon.ru | Учебник HTML — Таблицы

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

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

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

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

Пример создания таблиц в HTML

    Создание HTML-таблиц   
Ячейка 1.1Ячейка 1.2Ячейка 1.3
Ячейка 2.1Ячейка 2.2Ячейка 2.3
Ячейка 3.1Ячейка 3.2Ячейка 3.3

Результат в браузере

Ячейка 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-элементом, а у блоков четыре стороны, то и параметры указываются для четырех сторон по часовой стрелке:. Ну, что такое ноль, я думаю, вы понимаете, а вот «auto» говорит браузеру, чтобы он сам высчитывал с данной стороны размер пустого пространства, исходя из значений других сторон. Вот и получается, что если с трех сторон ноль, то с четвертой — все остальное пространство, а если с двух сторон «auto», то значит делим внешние поля пополам.

И самое главное — не бойтесь использовать CSS вместо чистого и, во многих ситуациях, «деревянного» и устаревшего HTML. Так как этим вы вкладываете в свое развитие, а не возвращаетесь к каменным топорам! Тем более я вам все преподношу «на блюдечке». ��

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

    HTML. Таблица по центру   
Ячейка 1.1Ячейка 1.2Ячейка 1.3
Ячейка 2.1Ячейка 2.2Ячейка 2.3
Ячейка 3.1Ячейка 3.2Ячейка 3.3

Результат в браузере

Ячейка 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-таблиц и ячеек

    Ширина HTML-таблицы и ячеек   
Ячейка 1.1Ячейка 1.2
Ячейка 2.1Ячейка 2.2

Результат в браузере

Ячейка 1.1 Ячейка 1.2
Ячейка 2.1 Ячейка 2.2

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

Изменение высоты HTML-таблиц и ячеек

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

— указывайте высоту таблицы только в пикселях (px), так как процентную запись браузеры игнорируют.

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

Как и для ширины, используйте пиксели (px) или проценты (%), но здесь есть один момент. Когда вы указываете процентную запись, то конечно высота высчитывается исходя из размеров таблицы, поэтому если высота блока не указана — браузеры проигнорируют значения для ячеек.

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

В HTML-таблицах высота строки (как и ширина столбца) всегда равна высоте ее самой высокой ячейки. Поэтому, меняя высоту одной (любой) ячейки — вы меняете высоту всей строки.

Пример изменения высоты HTML-таблиц и ячеек

    Ширина HTML-таблицы м ячеек   
Ячейка 1.1Ячейка 1.2
Ячейка 2.1Ячейка 2.2

Результат в браузере

Ячейка 1.1 Ячейка 1.2
Ячейка 2.1 Ячейка 2.2

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

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

Для изменения выравнивания содержимого HTML-таблиц имеются атрибуты align и valign, которые указываются в тегах для рядов (строк) или и для отдельных ячеек:

align=»left» — Выравнивание по левой стороне ячейки.

align=»center» — По центру.

align=»right» — По правой стороне.

valign=»top» — Выравнивание по верхней стороне ячейки.

valign=»middle» — По центру.

valign=»bottom» — По нижней стороне.

Пример выравнивания в HTML-таблицах

    Выравнивание в таблице HTML   
Ячейка 1.1 Ячейка 1.2
Ячейка 2.1 Ячейка 2.2

Результат в браузере

Ячейка 1.1 Ячейка 1.2
Ячейка 2.1 Ячейка 2.2

Фон HTML-таблиц

В старых версиях HTML у тегов таблиц был специальный атрибут bgcolor, который изменял цвет фона всей таблицы или ее части. Но в уроке Меняем цвет текста и фона мы с вами изучили универсальный способ изменения фона абсолютно любых HTML-элементов, поэтому им и пользуйтесь.

А вот фонового изображения у таблиц язык HTML вообще не предусматривал, поэтому в свое время производители браузеров ввели для этого атрибут — background. Браузеры и до сих пор его понимают, но опять же, в уроке Изображения для фонов вы уже научились правильно устанавливать изображения-фоны для любых элементов.

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

  1. Измените фон страницы и размер шрифта.
  2. В начале страницы создайте четыре ссылки-изображения.
  3. Ниже сделайте таблицу из одного ряда и двух столбцов. Растяните ее ширину на всю страницу, сделайте выравнивание по верхней стороне ряда и измените фон каждой ячейки.
  4. Сделайте ширину левой колонки 150px и поместите в нее ссылки-изображения.
  5. Под таблицей создайте текстовые ссылки.
  6. Сделайте так, чтобы при наведении курсора мыши на любую ссылку появлялась «всплывающая» подсказка.
  7. Не забывайте про Комментарии в HTML, они серьезно помогают при работе.

Посмотреть результат → Посмотреть ответ

3.5. Ширина и высота таблицы и ячеек. HTML, XHTML и CSS на 100%

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

Ширина таблицы задается атрибутом width элемента TABLE. Значение можно задавать как в абсолютных единицах (width=»2 5 0″), так и в относительных (width=»80 %»). Например, задав значение ширины в 600 пикселов, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора. Если же ширина задается в процентах, то они высчитываются от ширины окна браузера или от ширины ячейки другой таблицы, в которую вставлена данная. То же самое можно делать и с высотой таблицы с помощью атрибута height.

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

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

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

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

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

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

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

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

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

Листинг 3.5. Код таблицы шириной 300 пикселов

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

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

Данный текст является ознакомительным фрагментом.

Читать книгу целиком

Поделитесь на страничке

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

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

CMS

  • Recluse
  • 21.05.2017
  • 5 299
  • 0
  • 100.00%
  • 1
  • 08.04.2019

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

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

 
Kraftwerk1969Германия
Deutsch Amerikanische Freundschaft1978Германия
Front 2421981Бельгия

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

table < table-layout:fixed; width:450px; >table td < overflow:hidden; >table td:nth-of-type(1) < width:200px; >table td:nth-of-type(2) < width:75px; >table td:nth-of-type(3)

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

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

 
Kraftwerk1969Германия
Deutsch Amerikanische Freundschaft1978Германия
Front 2421981Бельгия

То и CSS код должен быть следующим:

table.music < table-layout:fixed; width:450px; >table.music td < overflow:hidden; >table.music td:nth-of-type(1) < width:200px; >table.music td:nth-of-type(2) < width:75px; >table.music td:nth-of-type(3)
table.music < table-layout:fixed; width:450px; >table.music td, table.music th < overflow:hidden; >table.music td:nth-of-type(1), table.music th:nth-of-type(1) < width:200px; >table.music td:nth-of-type(2), table.music th:nth-of-type(2) < width:75px; >table.music td:nth-of-type(3), table.music th:nth-of-type(3)

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

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