CSS: Свойство border-collapse

Технические моменты создания сайтов и других Web-приложений.

CSS: Свойство border-collapse

Сообщение Александр » 04 сен 2013, 16:37

Данное свойство устанавливает способ отображения рамки вокруг ячейки таблицы. Это свойство должно определить, какую рамку должна иметь ячейка, сдвоенную с соседней ячейкой или свою собственную.
Пример кода:
Код: выделить все
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство border-collapse</title>
  <style>
   table {
    width: 90%; /* Ширина таблицы */
    border: 4px double red; /* Рамка вокруг таблицы */
    border-collapse: collapse; /* Отображать только одинарные линии */
   }
   th {
    text-align: left; /* Выравнивание по левому краю */
    background: #eee; /* Цвет фона ячеек */
    padding: 3px; /* Поля вокруг содержимого ячеек */
    border: 1px solid red; /* Граница вокруг ячеек */
   }
   td {
    padding: 4px; /* Поля вокруг содержимого ячеек */
    border: 1px solid red; /* Граница вокруг ячеек */
   }
  </style>
 </head>
 <body>   
  <table>
   <tr>
    <th>&nbsp;</th>
    <th>1111</th>
    <th>2222</th>
    <th>333</th>
   </tr>
   <tr>
    <td>111</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
   </tr>
   <tr>
    <td>222</td>
    <td>21</td>
    <td>22</td>
    <td>23</td>
   </tr>
   <tr>
    <td>333</td>
    <td>31</td>
    <td>32</td>
    <td>33</td>
   </tr>
  </table>
 </body>
</html>

Визуальные результаты от применения данного свойства будут такими:
bc1.png
Применение свойства border-collapse
bc1.png (4.63 KiB) Просмотров: 2878
Аватар пользователя
Александр
Продвинутый Юзер
 
Сообщений: 218
Зарегистрирован: 12 мар 2012, 16:32

Вернуться в Программирование для Web

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1