русс | укр

Программирование:

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог1С

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании

Обучение

Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Границы таблицы.

Дата добавления: 2015-07-09; просмотров: 426; Нарушение авторских прав

Свойство CSS border-collapse определяет стиль отображения границ таблицы.

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

Внешний вид границ таблицы может принимать следующий вид:

· separate - ячейки таблицы отделены друг от друга (по умолчанию).

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

· inherit - свойства наследуются у родителя элемента. (работает далеко не во всех браузерах.)

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Стиль таблицы</title>
</head>
<body>
<table cellpadding="5" border="5">
<caption>Таблица с бордюром по умолчанию</caption>
<tr>
<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>
</tr>
<tr>
<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>
</tr>
</table>
<hr>
<table cellpadding="5" border="5" style="border-collapse: collapse">
<caption>А эта таблица использует свойство CSS border-collapse с значением collapse</caption>
<tr>
<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>
</tr>
<tr>
<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>
</tr>
</table>
</body>
</html>

Свойство border-collapse применяется только к тегу <table> и элементам, у которых атрибут display имет значение table или inline-table.О свойстве display расскажу в отдельной главе.

Полезные советы:

· Довольно часто слышу вопрос: - "Как сделать вертикальную линию, по аналогии с тегом <hr> - горизонтальная разделительная линия?".

Один из способов решения данной задачи является использование блока "пустышки" нужных размеров с левым или правым бордюром (свойства: border-left или border-right) необходимого стиля, который собственно и будет выступать в роли вертикальной линии.



<== предыдущая лекция | следующая лекция ==>
Границы справа слева сверху и снизу отдельно. | Классы CSS.

Карта сайта Карта сайта укр

Видео
Уроки php mysql Программирование
Онлайн сервисы
Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские
Полезное

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных

 


Не нашли то, что искали? Google вам в помощь!

  
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.
Генерация страницы за: 0.282 сек.