Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого...
Индивидуальные очистные сооружения: К классу индивидуальных очистных сооружений относят сооружения, пропускная способность которых...
Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого...
Индивидуальные очистные сооружения: К классу индивидуальных очистных сооружений относят сооружения, пропускная способность которых...
Топ:
Когда производится ограждение поезда, остановившегося на перегоне: Во всех случаях немедленно должно быть ограждено место препятствия для движения поездов на смежном пути двухпутного...
Установка замедленного коксования: Чем выше температура и ниже давление, тем место разрыва углеродной цепи всё больше смещается к её концу и значительно возрастает...
История развития методов оптимизации: теорема Куна-Таккера, метод Лагранжа, роль выпуклости в оптимизации...
Интересное:
Наиболее распространенные виды рака: Раковая опухоль — это самостоятельное новообразование, которое может возникнуть и от повышенного давления...
Принципы управления денежными потоками: одним из методов контроля за состоянием денежной наличности является...
Искусственное повышение поверхности территории: Варианты искусственного повышения поверхности территории необходимо выбирать на основе анализа следующих характеристик защищаемой территории...
Дисциплины:
 2020-05-07 |
 312 |
из
5.00
|
Заказать работу |
|
|
|
|
В статье «Блочная и строчная модель в CSS» мы научились применять внутренние и внешние отступы к текстовой информации, добавляя промежуток вокруг содержимого элементов. При работе с таблицами надо понимать, что добавить внутренний отступ (padding) вы сможете либо к её заголовку, либо к ее ячейкам, напрямую к тегу <table> добавить вы сможете только внешний отступ (margin):
<!DOCTYPE html>
<html>
<head>
<title> Использование внутренних отступов в таблице </title>
<style>
table {
margin: 0 auto; /* центруем по горизонитали внешними отступами */
}
td, th {
border: 1px solid #F50; /* задаем сплошную границу размером 1 пиксель цвета #F50 */
padding: 19px; /* устанавливаем внутренние отступы для всех сторон */
}
caption {
padding-bottom: 19px; /* устанавливаем внутренние отступы снизу для всех сторон */
}
</style>
</head>
<body>
<table>
<caption> Отступывтаблице </caption>
<tr>
<th> 1 </th><th> 2 </th><th> 3 </th><th> 4 </th>
</tr>
<tr>
<td> 2 </td><td></td><td></td><td></td>
</tr>
<tr>
<td> 3 </td><td></td><td></td><td></td>
</tr>
<tr>
|
|
<td> 4 </td><td></td><td></td><td></td>
</tr>
</table>
</body>
</html>
В данном примере мы:
· Разместили таблицу по центру, используя прием центровки по горизонитали внешними отступами (margin: 0 auto).
· Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 1 пиксель шестнадцатеричным цветом #F50 и установили внутренние отступы размером 19 пикселей для всех сторон.
· Для наименования таблицы (тег <caption>) мы установили внутренний отступ снизу равный 19 пикселей. Надеюсь, Вас не смущают неровные числа:)
Результат нашего примера:
Рис. 144 Пример использования внутренних отступов в таблице.
Промежуток между ячейками
После рассмотренного выше примера, вы могли заметить, что у нас остался промежуток между всеми ячейками таблицы. Давайте рассмотрим, как убрать промежуток между ячейками таблицы, либо его увеличить.
Чтобы задать расстояние между границами соседних ячеек необходимо использовать свойство CSS - border-spacing.
<!DOCTYPE html>
<html>
<head>
<title> Изменение промежутка между таблицами </title>
<style>
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; /* промежуток между ячейками таблицы (горизонтальный и вертикальный) */
|
|
}
</style>
</head>
<body>
<table class = "first" >
<caption> border-spacing: 30px 10px; </caption>
<tr>
<th> 1 </th><th> 2 </th><th> 3 </th>
</tr>
<tr>
<td> 2 </td><td></td><td></td>
</tr>
<tr>
<td> 3 </td><td></td><td></td>
</tr>
</table>
<table class = "second" >
<caption> border-spacing: 0; </caption>
<tr>
<th> 1 </th><th> 2 </th><th> 3 </th>
</tr>
<tr>
<td> 2 </td><td></td><td></td>
</tr>
<tr>
<td> 3 </td><td></td><td></td>
</tr>
</table>
<table class = "third" >
<caption> border-spacing:0.2em; </caption>
<tr>
<th> 1 </th><th> 2 </th><th> 3 </th>
</tr>
<tr>
<td> 2 </td><td></td><td></td>
|
|
</tr>
<tr>
<td> 3 </td><td></td><td></td>
</tr>
</table>
</body>
</html>
В данном примере мы:
· Сделали наши таблицы плавающими и сместили по левому краю (float: left). Если вы пропустили тему плавающих элементов, то вы всегда можете к ней вернуться в этом учебнике - «Плавающие элементы в CSS».
· Кроме того установили для таблиц внешний отступ справа равный 30px и установили вертикальное выравнивание таблиц (верх элемента выравнивается по верху самого высокого элемента). Мы еще вернемся к подробному рассмотрению этого свойства в этой статье.
· Установили для наименования таблицы (тег <caption>) – жирное начертание.
· Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 1 пиксель шестнадцатеричным цветом #F50 и установили внутренние отступы размером 19 пикселей для всех сторон.
· Для первой таблицы с классом .first мы установили промежуток между ячейками таблицы (свойство border-spacing) равный 30px 10px, для второй таблицы с классом .second равный нулю, для третей таблицы с классом .third равный 0.2em.
Обращаю Ваше внимание, что если в свойстве border-spacing указано только одно значение длины, то оно указывает интервалы, как по горизонтали, так и вертикали, а если указаны два значения длины, то первое определяет горизонтальное расстояние, а второе вертикальное. Расстояние между границами соседних ячеек допускается указывать в единицах измерения CSS (px, cm, em и др). Отрицательные значения не допускаются.
Результат нашего примера:
Рис. 145 Пример изменения промежутка между таблицами.
|
|
|
Таксономические единицы (категории) растений: Каждая система классификации состоит из определённых соподчиненных друг другу...
Индивидуальные очистные сооружения: К классу индивидуальных очистных сооружений относят сооружения, пропускная способность которых...
Наброски и зарисовки растений, плодов, цветов: Освоить конструктивное построение структуры дерева через зарисовки отдельных деревьев, группы деревьев...
Адаптации растений и животных к жизни в горах: Большое значение для жизни организмов в горах имеют степень расчленения, крутизна и экспозиционные различия склонов...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!