Как убрать расстояние между ячейками таблицы html

Как убрать 1пиксельный отступ в Table.

Народ нужна помошь.
Суть проблемы! Есть сайт который нужно сверстать. В двух правых ячейках должно быть изображение без отступов(как бы однородное) НО между ячейками таблици в которые помещены данные изображения появляется 1пиксельный отступ. Помогите его убрать

[SIZE="1"]      
 
 
  
 
 
 
меню
 
контент
 
 
 
подвал
 
 
  [/SIZE]

[SIZE="2"]/*css*/ html, body < margin:0px; padding:0px; >table.main < width: 100%; height: 100%; border-collapse: collapse; background-color: #ffffff; >td.head < height:184px; >td.skywindow1 < width:283px; height:184px; vertical-align: top; >td.skywindow2 < background-image: url(image/right_window.jpg); width:184px; height:574px; border-collapse: collapse; >td < padding:0px; margin:0px; >img < margin:0px; padding:0px; border-collapse: collapse; >[/SIZE]

Добавлено через 1 час 17 минут 48 секунд

кому не лень помогите

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как убрать отступ?
Как убрать вот этот отступ? margin и padding не предлагать, border неправильно отображается

Как убрать отступ
всем привет. не могу понять, откуда отступ взялся? вот страница — http://93lab.ru даю скрин, где.

Как убрать отступ? (CSS)
Как убрать этот отступ в выпадающем меню?

Как убрать стандартный отступ у BulletedList
Добрый вечер! Как можно убрать отступ BulletedList?

701 / 573 / 59
Регистрация: 18.11.2008
Сообщений: 2,147
288 / 131 / 4
Регистрация: 15.02.2009
Сообщений: 520

GаlаX-у от BlackApricot-а

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

Вот что у меня получилось, поправьте, если я тоже поспешил.

оля/1987-е от BlackApricot-а

Удалите:
border-collapse:collapse; — Зачем это при border=»0″?
vertical-align:top; — Поднимаете содержимое ячейки вверх, и возмущаетесь! Правда в вашем случае, картинке некуда было подниматься.

— Картинку из ячейки
height=»184px», width=»283px» — зачем тут «px», это Вам не CSS

Добавьте:
td.skywindow1 < background-image: url(image/top_right.jpg); . >

 

— Этот пробел или текст, иначе ослик ее выделит

Что это было:
Браузер ставит картинку, как текст, выравнивая ее низ по текстовой строке, и тот зазор, это место где рисуются «хвостики» букв «у», «р» и других. Кстати, там не один пиксель, а больше.

Скачайте себе нормальный редактор, тут есть и халявная версия.
htmlvalidator.com

Регистрация: 21.02.2009
Сообщений: 20

Большое спасибо что прояснили такие моменты приму на заметку)
Проблема решилась сама собой «при резке» картинок случайно был отрезан 1 пиксель бекграунда.
Еще если не трудно подкиньте статеек по оформлению CSS форм без помощи таблиц. На данном этапе интерисуют формы авторизации.Код пока что пишется без доктайпа. Почитала статью на htmlbook не ставится картинка .
Спасибо за внимание

Регистрация: 12.12.2008
Сообщений: 50

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

172 / 101 / 10
Регистрация: 22.02.2009
Сообщений: 440
В каком смысле не ставится?
701 / 573 / 59
Регистрация: 18.11.2008
Сообщений: 2,147

Сообщение от оля/1987

Код пока что пишется без доктайпа.
Регистрация: 21.02.2009
Сообщений: 20

GаlаX почему зря?верстка табличная с таблицами до 3го уровня резиновая. думаю даже на HTML 1.0 все без багов будет.
В форме не ставится в место

input type="submit">

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

form action="/users/" method="post"> table border="0" cellspacing="0" cellpadding="2"> tr> td class="form1">Логин:/td> td>input name="user_login" type="text" size="10">/td> /tr> tr> td class="form1">Пароль:/td> td>input name="user_password" type="password" size="10" maxlength="10" value="">/td>/tr> tr> td colspan="2" align="left">input name="apply" type="submit" maxlength="10" value="Вход"/>/td> /tr> /table> /form>

Добавлено через 59 минут 12 секунд
Столкнулся с проблемой после вставки в хтмл доктайпа 4.01 трансишнал.
ослик и опера отказываются осображать вложенную таблицу на 100% высоты ячейки. Чтобы прйсти валидацию убрал все в CSS но результата нет параметр height=100% игнорируется. В итоге вложенная таблица отображается middle а ширина как не странно 100%. ПОпытался найти статьи. понял только то что нужно задавать стилевые правила как для вложенной таблицы так и для её контейнера.
КОнтейнер шириной 300px а так как таблица резиновая то высота не задавалась.
ТАк вот как мне описать height и для контейнера и для таблицы?

172 / 101 / 10
Регистрация: 22.02.2009
Сообщений: 440

height в процентах не поддерживается. Только абсолютные значение — px. Ставишь, к примеру, height: 300px; — получаешь высоту в 300px, если твои данные превышают это значение — высота будет увеличена автоматически.
middle — это позиционирование данных внутри таблицы, в данном случае посередине относительно верха и низа (но не право — лево!) Чтобы отформатировать элемент по высоте используется vertical-align: [top, middle, bottom];

А с картинкой вместо кнопки тут ты просто сам невнимателен.
Вот твой код. Картинка в данном случае должна находиться в том же каталоге, что и html-файл.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

form action="/users/auch.php" method="post"> table border="0" cellspacing="0" cellpadding="2"> tr> td class="form1">Логин:/td> td>input name="user_login" type="text" size="10" maxlength="10">/td> /tr> tr> td class="form1">Пароль:/td> td>input name="user_password" type="password" size="10" maxlength="10">/td>/tr> tr> td colspan="2" align="left">input type="image" name="apply" src="imgbutton.gif" alt="Вход">/td> /tr> /table> /form>

CSS: Оформление таблиц

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

Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing , то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse. Оно может принимать два значения:

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

     table, td, th < border: 4px outset blue; border-spacing: 5px; >.first  
Имя
Фамилия
 
Гомер
Симпсон
 
Мардж
Симпсон
 
 
 
Имя
Фамилия
 
Гомер
Симпсон
 
Мардж
Симпсон
 
   

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

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

th, td

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

table < width: 70%; >th

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

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

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

• top: текст выравнивается по верхней границе ячейки
• middle: выравнивает текст по центру (значение по умолчанию)
• bottom: текст выравнивается по нижней границе ячейки

     table, td, th < border: 1px solid black; border-collapse: collapse; >table < width: 70% >td < text-align: right; >th < height: 50px; >.test1 < vertical-align: top; >.test2  
Имя
Фамилия
 
Гомер
Симпсон
 
Мардж
Симпсон
 
   

Чередование фонового цвета строк таблицы

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

     table < width: 70%; border-collapse: collapse; >td, th < border: 1px solid #98bf21; padding: 3px 7px 2px 7px; >th < text-align: left; padding: 5px; background-color: #A7C942; color: #fff; >.alt td  
Имя
Фамилия
Положение
 
Гомер
Симпсон
отец
 
Мардж
Симпсон
мать
 
Барт
Симпсон
сын
 
Лиза
Симпсон
дочь
 
   

Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса :nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные):

tr:nth-child(odd)

Изменение фона строки при наведении курсора

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

Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс :hover к селектору строки таблицы и задать нужный цвет фона:

tr:hover

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

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

table

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

table

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru

border — spacing

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

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Обновлено 8 ноября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство border — spacing задаёт отступ между рамками ячеек таблицы.

Пример

Скопировать ссылку «Пример» Скопировано

 table  border-spacing: 10px;> table  border-spacing: 10px; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Разрешается указывать одно или два неотрицательных значения:

1. border — spacing : 1px — расстояние между ячейками со всех сторон одинаковое.
2. border — spacing : 1px 2px — первое значение задаёт расстояние между ячейками по горизонтали, второе — по вертикали.

Как понять

Скопировать ссылку «Как понять» Скопировано

Свойство border — spacing задаёт расстояние между ячейками таблицы. Это свойство работает только для таблиц со свойством border — collapse в значении separate .

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

Работа с таблицами в CSS

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

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

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

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

Работа с отступами в таблице

В статье «Блочная и строчная модель в CSS» мы научились применять внутренние и внешние отступы к текстовой информации, добавляя промежуток вокруг содержимого элементов. При работе с таблицами надо понимать, что добавить внутренний отступ (padding) вы сможете либо к её заголовку, либо к ее ячейкам, напрямую к тегу добавить вы сможете только внешний отступ (margin):

   Использование внутренних отступов в таблице table  margin: 0 auto; /* центруем по горизонитали внешними отступами */ > td, th  border: 1px solid #F50; /* задаем сплошную границу размером 1 пиксель цвета #F50 */ padding: 19px; /* устанавливаем внутренние отступы для всех сторон */ > caption  padding-bottom: 19px; /* устанавливаем внутренние отступы снизу для всех сторон */ >   Отступы в таблице 1 2 3 4234   

В данном примере мы:

• Разместили таблицу по центру, используя прием центровки по горизонитали внешними отступами (margin: 0 auto ).
• Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 1 пиксель шестнадцатеричным цветом #F50 и установили внутренние отступы размером 19 пикселей для всех сторон.
• Для наименования таблицы (тег ) мы установили внутренний отступ снизу равный 19 пикселей. Надеюсь, Вас не смущают неровные числа 🙂

Результат нашего примера:

Промежуток между ячейками

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

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

   Изменение промежутка между таблицами table  vertical-align: top; /* верх элемента выравнивается по верху самого высокого элемента */ float: left; /* таблицы становятся плавающими элементами, смещенными по левому краю */ margin-right: 30px; /* устанавливаем внешние отступы справа */ > td, th  border: 1px solid #F50; /* задаем сплошную границу размером 1 пиксель цвета #F50 */ padding: 19px; /* устанавливаем внутренние отступы для всех сторон */ > caption  font-weight: bold; /* жирное начертание */ > .first  border-spacing: 30px 10px; /* промежуток между ячейками таблицы (первое значение - горизонтальный, второе вертикальный)*/ > .second  border-spacing: 0; /* промежуток между ячейками таблицы отсутствует */ > .third  border-spacing: 0.2em; /* промежуток между ячейками таблицы (горизонтальный и вертикальный) */ >  class ="first"> border-spacing: 30px 10px; 1 2 323 class ="second"> border-spacing: 0; 1 2 323 class ="third"> border-spacing:0.2em; 1 2 323   

В данном примере мы:

• Сделали наши таблицы плавающими и сместили по левому краю (float: left ). Если вы пропустили тему плавающих элементов, то вы всегда можете к ней вернуться в этом учебнике — «Плавающие элементы в CSS».
• Кроме того установили для таблиц внешний отступ справа равный 30px и установили вертикальное выравнивание таблиц (верх элемента выравнивается по верху самого высокого элемента). Мы еще вернемся к подробному рассмотрению этого свойства в этой статье.
• Установили для наименования таблицы (тег ) – жирное начертание.
• Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 1 пиксель шестнадцатеричным цветом #F50 и установили внутренние отступы размером 19 пикселей для всех сторон.
• Для первой таблицы с классом .first мы установили промежуток между ячейками таблицы (свойство border-spacing) равный 30px 10px , для второй таблицы с классом .second равный нулю, для третей таблицы с классом .third равный 0.2em .

Обращаю Ваше внимание, что если в свойстве border-spacing указано только одно значение длины, то оно указывает интервалы, как по горизонтали, так и вертикали, а если указаны два значения длины, то первое определяет горизонтальное расстояние, а второе вертикальное. Расстояние между границами соседних ячеек допускается указывать в единицах измерения CSS (px, cm, em и др). Отрицательные значения не допускаются.

Результат нашего примера:

Отображение границ вокруг ячеек таблицы

Вы можете сказать: — так, мы убрали промежуток между ячейками, используя свойство border-spacing со значением 0 , но почему у нас теперь границы у ячеек то пересекаются?

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

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

Рассмотрим сравнение поведения границ при использовании свойства border-spacing со значением 0 и свойства border-collapse со значением collapse :

   Пример отображения границ вокруг ячеек таблицы table  float: left; /* таблицы становятся плавающими элементами, смещенными по левому краю */ margin-right: 30px; /* устанавливаем внешние отступы справа */ > td, th  border: 5px solid #F50; /* задаем сплошную границу размером 5 пикселей цвета #F50 */ width: 50px; /* ширина ячеек */ height: 75px; /* высота ячеек */ > caption  font-weight: bold; /* жирное начертание */ > .first  border-spacing: 0; /* промежуток между ячейками таблицы отсутствует */ > .second  border-collapse: collapse; /* объединяем границы ячеек в одну */ >  class ="first"> border-spacing: 0; 1 2 323 class ="second"> border-collapse: collapse; 1 2 323   

В данном примере мы:

• Сделали наши таблицы плавающими и сместили по левому краю (float: left ), установили для них внешний отступ справа равный 30px .
• Установили для наименования таблицы (тег ) – жирное начертание.
• Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 5 пикселей шестнадцатеричным цветом #F50 и установили фиксированную ширину 50px и высоту 75 пикселей.
• Для первой таблицы с классом .first мы установили промежуток между ячейками таблицы равный нулю ( border-spacing : 0 ;), а для второй таблицы с классом .second установили свойство border-collapse со значением collapse , которое объединяет границы ячеек в одну, когда это возможно.

Результат нашего примера:

Свойство border-collapse имеет всего два значения для отображения границ вокруг ячеек таблицы:

Значение	Описание
separate	Отдельно стоящие границы (свойства border-spacing и empty-cells не будут игнорироваться). Это значение по умолчанию.
collapse	Границы объединяются в одну, когда это возможно (свойства border-spacing и empty-cells игнорируются).

Обратите внимание, что когда мы используем свойство border-collapse со значением collapse такие свойства как border-spacing и empty-cells игнорируются (не употребляйте их одновременно)! Стоп, а что за empty-cells?

Поведение пустых ячеек

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

Давайте перейдем к примеру:

   Пример отображения пустых ячеек таблицы table  float: left; /* таблицы становятся плавающими элементами, смещенными по левому краю */ margin-right: 30px; /* устанавливаем внешние отступы справа */ > td, th  border: 1px solid #F50; /* задаем сплошную границу размером 1 пиксель цвета #F50 */ width: 75px; /* ширина ячеек */ height: 50px; /* высота ячеек */ background: wheat; /* задаем цвет заднего фона ячеек */ > caption  font-weight: bold; /* жирное начертание */ > .first  empty-cells: show; /* показывать пустые ячейки (по умолчанию) */ > .second  empty-cells: hide; /* скрывать пустые ячейки */ >  class ="first"> empty-cells: show; 1 2 32 ☺3 ☺ class ="second"> empty-cells: hide; 1 2 32 ☺3 ☺   

Понять, как действует свойство empty-cells из этого примера очень просто, если для него установлено значение hide , то пустые ячейки и фон в них будут скрыты, если установлено значение show (по умолчанию), то они будут отображаться.

Расположение заголовка таблицы

Давайте рассмотрим еще одно простое свойство для стилизации таблиц — caption-side, которое устанавливает расположение заголовка таблицы (над или под таблицей). По умолчанию свойство caption-side имеет значение top , которое помещает заголовок над таблицей. Для того, чтобы поместить заголовок под таблицу необходим использовать свойство со значение bottom .

Давайте рассмотрим пример использования этого свойства:

   Пример использования свойства caption-side td, th  border: 1px solid blue; /* задаем сплошную границу размером 1 пиксель синего цвета */ > .topCaption  caption-side: top; /* заголовок таблицы находится над ней */ > .bottomCaption  caption-side: bottom; /* заголовок таблицы находится под ней */ >  class ="topCaption"> Заголовок над таблицей Наименование ЦенаРыба 350 рублейМясо 250 рублей 
class ="bottomCaption"> Заголовок под таблицей Наименование ЦенаРыба 350 рублейМясо 250 рублей   

В данном примере мы создали два класса, которые управляют расположением заголовка таблицы. Первый класс (.topCaption) помещает заголовок таблицы над ней, мы применили его к первой таблице, а второй класс (.bottomCaption) помещает заголовок таблицы под ней, мы применили его ко второй таблице. Класс .topCaption имеет значение свойства caption-side по умолчанию и создан для демонстрации.

Результат нашего примера:

Горизонтальное и вертикальное выравнивание

В большинстве случаев при работе с таблицами вам придется настраивать выравнивание содержимого внутри заголовочных ячеек и ячеек данных. Свойство text-align применяется для горизонтального выравнивания по аналогии с любой текстовой информацией. Применение этого свойства для текста мы рассматривали ранее в статье «Форматирование текста в CSS».

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

   Пример горизонтального выравнивания в таблице table  border-collapse: collapse; /* объединяем границы ячеек в одну */ > td, th  border: 1px solid; /* задаем сплошную границу размером 1 пиксель */ > .left  text-align: left; /* выравнивает текст ячейки влево */ > .right  text-align: right; /* выравнивает текст ячейки вправо */ > .center  text-align: center; /* выравнивает текст ячейки по центру */ > .justify  text-align: justify; /* выравнивает текст ячейки по ширине */ >   Значение Описаниеclass ="left"> left Выравнивает текст ячейки влево. Это значение по умолчанию (если направление текста слева направо).class ="right"> right Выравнивает текст ячейки вправо. Это значение по умолчанию (если направление текста справа налево).class ="center"> center Выравнивает текст ячейки по центру.class ="justify"> justify Растягивает линии так, что каждая линия имеет одинаковую ширину (растягивает текст ячейки по ширине).   

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

Результат нашего примера:

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

Обращаю Ваше внимание, что при работе с ячейками таблицы применяются только следующие значения * этого свойства:

Значение	Описание
baseline	Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию.
top	Выравнивает содержимое ячейки вертикально по верхнему краю.
middle	Выравнивает содержимое ячейки вертикально по середине.
bottom	Выравнивает содержимое ячейки вертикально по нижнему краю.

* — Значения sub , super , text-top , text-bottom , length и % , примененные к ячейке таблицы будут вести себя как при использовании значения baseline .

Рассмотрим пример использования:

   Пример вертикального выравнивания в таблице table  border-collapse: collapse; /* объединяем границы ячеек в одну */ > td, th  border: 1px solid; /* задаем сплошную границу размером 1 пиксель */ height: 55px; /* задаем высоту ячеек */ > .baseline  vertical-align: baseline; /* выравнивает базовую линию ячейки по базовой линии родителя */ > .top  vertical-align: top; /* выравнивает содержимое ячейки вертикально по верхнему краю */ > .middle  vertical-align: middle; /* выравнивает содержимое ячейки вертикально по середине */ > .bottom  vertical-align: bottom; /* выравнивает содержимое ячейки вертикально по нижнему краю */ >   Значение Описаниеclass ="baseline"> baseline Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию.class ="top"> top Выравнивает содержимое ячейки вертикально по верхнему краю.class ="middle"> middle Выравнивает содержимое ячейки вертикально по середине.class ="bottom"> bottom Выравнивает содержимое ячейки вертикально по нижнему краю.   

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

Алгоритм размещения макета таблицы браузером

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

Чтобы изменить тип размещения макета таблицы браузером с автоматического на фиксированный, необходимо использовать CSS свойство table-layout со значением fixed .

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

Давайте рассмотрим применение этого свойства на следующем примере:

   Пример использования свойства table-layout table  width: 50%; /* задаем ширину таблицы */ word-wrap: break-word; /* слово может быть прервано в произвольном месте */ > td, th  border: 1px solid Chocolate; /* задаем сплошную границу размером 1 пиксель цвета шоколад */ > .test  table-layout: auto; /* автоматический алгоритм размещения макета таблицы браузером (по умолчанию) */ > .test2  table-layout: fixed; /* фиксированный алгоритм размещения макета таблицы браузером */ >  class ="test"> table-layout: auto; Наименование 2009 2010 2011 2012 2013 2014 2015 2016Пшеница 125 215 2540 33287 695878 1222222 125840000 125 class ="test2"> table-layout: fixed; Наименование 2009 2010 2011 2012 2013 2014 2015 2016Пшеница 125 215 2540 33287 695878 1222222 125840000 125   

В данном примере мы:

• К одной и той же таблице применили различные алгоритмы размещения макета таблицы браузером. Для первой таблицы мы использовали автоматический алгоритм ( auto ). Обратите внимание, что при этом размер таблицы стал больше заданного значения в 50% от родительского элемента (произошло переполнение).
• Кроме того мы использовали для таблиц новое для вас свойство word-wrap, которое указывает браузеру, переносить или нет длинные слова, которые не помещаются по ширине в заданную область (разрешается ли разрывать строки внутри слов). Значение break-word указывает, что слово может быть прервано в произвольном месте, если нет допустимой точки для разрыва.
• Для второй таблицы был использован фиксированный алгоритм ( fixed ) размещения макета таблицы браузером. Как вы можете заметить размер таблицы соответствует заданным нами значениям ширины в процентах, а числа прерваны в произвольных местах, чтобы не произошло переполнение. Если бы мы не использовали свойство word-wrap, то ширина второй таблицы бы не изменилась, но числа переполнили бы ячейки (вышли из ячеек).

Стилизация строк и столбцов таблицы

Мы с Вами частично уже затрагивали методы стилизации строк и столбцов таблицы в статье «Селекторы. Часть 3.». В этой статье мы рассматривали применение группового псевдокласса :nth-child, который позволяет чередовать стили строк в таблицах с использованием значений even (четный) и odd (нечетный), либо по элементарной математической формуле.

Давайте повторим ранее рассмотренные методы и познакомимся с новыми способами стилизации строк и столбцов в таблицах. Перейдем к примерам.

   Пример использования псевдокласса :nth-child с таблицами table  width: 100%; /* задаем ширину таблицы */ border-collapse: collapse; /* объединяем границы ячеек в одну */ > td, th < border: 1px solid; /* задаем сплошную границу размером 1 пиксель */ > tr:nth-child(even)  /* выбираем все четные строки */ border: 3px solid red; /* задаем сплошную границу размером 3 пикселя красного цвета */ > td:nth-child(4n+2)  /* выбираем каждый четвертый элемент, начиная со второго */ background: #E8E8FF; /* задаем цвет заднего фона */ >   1 2 3 4 5 6 7 8 9 10 11 12 13 14234   

В данном примере мы:

• Указали, что наша таблица занимает 100% от родительского элемента, промежутки между ячеек отсутствуют.
• С использованием псевдокласса :nth-child задали, что все четные строки имеют сплошную границу 3 пикселя красного цвета.
• С использованием псевдокласса :nth-child задали, что каждая четвёртая ячейка данных таблицы (тег ) внутри строки, начиная со второй ячейки таблицы, будет выделена цветом (4n – каждый четвертый элемент выделяется, 2 – с какого элемента начинать).

Результат нашего примера:

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

   Пример стилизации строк в таблицах table  width: 100%; /* задаем ширину таблицы */ border-collapse: collapse; /* объединяем границы ячеек в одну */ > td, th  border: 1px solid; /* задаем сплошную границу размером 1 пиксель */ > tfoot  background-color: coral; /* задаем цвет заднего фона */ > thead  background-color: silver; /* задаем цвет заднего фона */ > tbody tr:hover  /* стилизуем элемент, на который в данный момент указывает курсор мыши */ background-color: khaki; /* задаем цвет заднего фона */ >   Услуга Стоимость применяется для создания "подвала" таблицы. Его принято писать после закрывающего тега , но отображается он в самом низу таблицы. -->Сумма 15 0001 1 0002 2 0003 3 0004 4 0005 5 000   

В этом примере мы:

• Установили ширину таблицы в 100% от ширины родительского элемента, для заголовочных и ячеек данных установили сплошную границу шириной 1px .
• Установили для элемента («подвал» таблицы) цвет заднего фона – coral, для элемента («шапка» таблицы) установили цвет заднего фона silver.
• Для элементов , которые находятся внутри элемента (тело таблицы) установили изменение цвета заднего фона при наведении (псевдокласс :hover) c белого на цвет khaki (подсвечивается вся строка).

Результат нашего примера:

Следующий пример рассматривает применение скругления углов к ячейкам таблицы (свойство border-radius).

   Пример скругления углов ячейки table  margin: 0 auto; /* центруем по горизонитали внешними отступами */ > th  width: 50px; /* задаем ширину ячейки */ height: 50px; /* задаем высоту ячейки */ border: 5px solid transparent; /* устанавливаем сплошную прозрачную границу размером 5 пикселей */ > th:hover  /* стилизуем элемент, на который в данный момент указывает курсор мыши */ background: blue; /* задаем цвет заднего фона */ color: orange; /* устанавливаем цвет текста */ border-radius: 100%; /* задаем радиус скругления */ border: 5px solid orange; /* устанавливаем сплошную границу размером 5 пикселей оранжевого цвета */ >   1 2 3 4 5   

В этом примере мы:

• Отцентровали таблицу внешними отступами, задали для заголовочных ячеек ширину и высоту 50px , указали прозрачную границу 5 пикселей.
• Установили, что при наведении (псевдокласс :hover) на заголовочную ячейку она получает задний фон синего цвета, оранжевый цвет текста, границу оранжевого цвета 5 пикселей и радиус скругления 100% .
• Прозрачная граница необходима для того, чтобы зарезервировать место под границу, которая будет отображена при наведении, если этого не сделать таблица будет «прыгать».

Результат нашего примера:

Следующий пример затрагивает использование HTML элементов и и их стилизации.

   Пример подсветки колонок таблицы table  width: 100%; /* задаем ширину таблицы */ border-collapse: collapse; /* объединяем границы ячеек в одну */ > td, th  border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */ width: 25%; /* задаем ширину ячеек */ > col:first-child  background: rgba(0,0,0,.3); /* задаем цвет заднего фона */ > col:nth-of-type(2)  background: rgba(0,0,0,.2); /* задаем цвет заднего фона */ > col:last-child  background: rgba(0,0,0,.1); /* задаем цвет заднего фона */ >      span ="2"> № заявки Услуга Цена, руб. Итого1 Пение 6 000 6 0002 Мытье 2 000 2 0003 Уборка 1 000 1 0004 Нытьё 1 500 1 5005 Чтение 3 000 3 000   

В этом примере мы:

• Устанавливаем, что наша таблица занимает 100% от родительского элемента, ячейки таблицы занимают 25% от родительского элемента и имеют сплошную границу 1 пиксель зеленого цвета. Промежуток между ячейками мы убрали, используя свойство border-collapse со значением collapse .
• К сожалению, единственное, что пока можно сделать с элементом , используя css, это задать цвет заднего фона и определить через HTML, сколько он занимает колонок таблицы. В этом примере мы создали группу из трех колонок, третья из них при этом занимает 2 столбца (атрибут span элемента со значением «2» ).
• Используем псевдокласс :first-child, который выбирает первый дочерний элемент своего родителя ( ) и задаем ему задний фон.
• Используем псевдокласс :nth-of-type(2) в котором указан элемент, который является заданным дочерним элементом своего родительского элемента (второй элемент ) и задаем ему задний фон.
• По аналогии с псевдоклассом :first-child, который выбирает первый дочерний элемент, используем псевдокласс :last-child и выбираем последний дочерний элемент своего родителя ( ), благодаря которому мы стилизуем третью и четвертую колонку.

Результат нашего примера:

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

В предыдущем примере мы поняли, что к HTML элементу можно применить только одно CSS свойство – цвет заднего фона (background-color), но при этом задать цвет заднего фона при наведении (псевдокласс :hover) на этот элемент напрямую нельзя. В этом примере мы рассмотрим, как подсветить столбец таблицы, используя только CSS.

   Пример подсветки колонок и строк таблицы при наведении table  width: 100%; /* задаем ширину таблицы */ border-collapse: collapse; /* объединяем границы ячеек в одну */ position: relative; /* элемент с относительным позиционированием */ > td, th  border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */ width: 25%; /* задаем ширину ячеек */ height: 45px; /* задаем высоту ячеек */ > tr:hover:not(:first-child)  /* стилизуем элемент, на который в данный момент указывает курсор мыши (но не строка с заголовочными ячейками) */ background: lime; /* задаем цвет заднего фона */ > td:hover:after  /* стилизуем элемент, на который в данный момент указывает курсор мыши и добавляем содержимое после каждого такого элемента */ content: ''; /* добавляем наше содержимое */ display: block; /* отображает элемент как блочный элемент */ position: absolute; /* элемент с абсолютным позиционированием */ width: 25%; /* задаем ширину блока, который будет появляться */ top: 0; /* определяем смещение позиционированного элемента относительно верхнего края */ bottom: 0; /* определяем смещение позиционированного элемента относительно нижнего края */ background: forestgreen; /* задаем цвет заднего фона */ z-index: -1; /* определяем порядок наложения элемента по оси z */ >   № заявки Услуга Цена, руб. Итого1 Пение 6 000 6 0002 Мытье 2 000 2 0003 Уборка 1 000 1 0004 Нытьё 1 500 1 5005 Чтение 3 000 3 000   

В этом примере мы:

• Устанавливаем, что наша таблица занимает 100% от родительского элемента, ячейки таблицы занимают 25% от родительского элемента и имеют сплошную границу 1 пиксель зеленого цвета, высота заголовочных и ячеек данных составляет 45px . Промежуток между ячейками мы убрали, используя свойство border-collapse со значением collapse .
• Для элемента установили при наведении (псевдокласс :hover) изменение цвета заднего фона c белого на lime (подсвечивается вся строка). Но мы, добавили псевдокласс отрицания :not(:first-child), который сообщает браузеру: — ты строки то подсвечивай, но только не первую дочернюю своего родителя (первая строка таблицы, состоящая из заголовочных элементов ).
• Кроме того мы установили свойство position для таблицы, которое определяет, что она у нас является элементом с относительным позиционированием ( relative ). Это означает, что при смещении элемент сдвигается относительно его текущей позиции. Это нам необходимо, чтобы мы могли позиционировать блок, который будет появляться при наведении на любой элемент .
• И так, используя псевдоэлемент ::after добавляем содержимое после каждого элемента при наведении. Псевдоэлемент ::after обязательно используется вместе со свойством content, благодаря которому мы вставляем блочный элемент, который имеет задний фон цвета forestgreen и имеет абсолютное позиционирование.
• Абсолютное позиционирование здесь необходимо для смещения элемента относительно заданного края его предка, при этом предок должен иметь значение position отличное от установленного по умолчанию — static , иначе отсчёт будет вестись относительно, указанного края окна браузера, по этой причине мы установили для таблицы относительное позиционирование ( relative ).
• Установили для нашего сгенерированного блока свойство top, которое указывает направление смещения позиционированного элемента от верхнего края и свойство bottom, которое указывает направление смещения позиционированного элемента от нижнего края. Для обоих свойств указали значение 0 , таким образом, блок будет полностью занимать элемент от низа и верха таблицы, ширину этого блока задали 25% это значение соответствует значению ширины самой ячейки.
• И заключительное свойство, которое мы установили для этого блока: z-index со значением «-1» оно определяет порядок расположения позиционированных элементов по оси Z. Это свойство необходимо, чтобы текст находился впереди этого блока, а не за ним, если не задать значение меньше нуля, то блок будет закрывать текст.

Результат нашего примера:

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

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

• Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

• Используя полученные знания составьте следующую таблицу:

  

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

CSS функции: радиальные градиенты
Позиционирование элементов

© 2016-2023 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com

Кажется, вы используете блокировщик рекламы 🙁

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

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.