Учебники

CSS — таблицы

Сентябрь 21, 2018

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

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

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

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

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

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

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

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

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

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

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

Теперь мы увидим, как использовать эти свойства на примерах.

Собственность границы-обрушения

Это свойство может иметь два значения свернуть и разделить . В следующем примере используются оба значения —

Live Demo

<html>
   <head>
      <style type = "text/css">
         table.one {border-collapse:collapse;}
         table.two {border-collapse:separate;}
         
         td.a {
            border-style:dotted; 
            border-width:3px; 
            border-color:#000000; 
            padding: 10px;
         }
         td.b {
            border-style:solid; 
            border-width:3px; 
            border-color:#333333; 
            padding:10px;
         }
      </style>
   </head>

   <body>
      <table class = "one">
         <caption>Collapse Border Example</caption>
         <tr><td class = "a"> Cell A Collapse Example</td></tr>
         <tr><td class = "b"> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class = "two">
         <caption>Separate Border Example</caption>
         <tr><td class = "a"> Cell A Separate Example</td></tr>
         <tr><td class = "b"> Cell B Separate Example</td></tr>
      </table>
   </body>
</html>

Это даст следующий результат —

Имущество на границе

Свойство border-spacing определяет расстояние, которое разделяет соседние ячейки. границы. Может принимать одно или два значения; это должны быть единицы длины.

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

ПРИМЕЧАНИЕ. — К сожалению, это свойство не работает в Netscape 7 или IE 6. 

<style type="text/css">
   /* If you provide one value */
   table.example {border-spacing:10px;}
   /* This is how you can provide two values */
   table.example {border-spacing:10px; 15px;}
</style>

Теперь давайте изменим предыдущий пример и посмотрим эффект —

Live Demo 

<html>
   <head>
      <style type = "text/css">
         table.one {
            border-collapse:separate;
            width:400px;
            border-spacing:10px;
         }
         table.two {
            border-collapse:separate;
            width:400px;
            border-spacing:10px 50px;
         }
      </style>
   </head>

   <body>
   
      <table class = "one" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Collapse Example</td></tr>
         <tr><td> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class = "two" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Separate Example</td></tr>
         <tr><td> Cell B Separate Example</td></tr>
      </table>
      
   </body>
</html>

Это даст следующий результат —

Свойство заголовка

Свойство caption-side позволяет вам указать, где содержимое элемента <caption> должно быть размещено по отношению к таблице. В следующей таблице перечислены возможные значения.

Это свойство может иметь одно из четырех значений top, bottom, left или right . В следующем примере используется каждое значение.

ПРИМЕЧАНИЕ. — Эти свойства могут не работать с вашим браузером IE.

Live Demo 

<html>
   <head>
      <style type = "text/css">
         caption.top {caption-side:top}
         caption.bottom {caption-side:bottom}
         caption.left {caption-side:left}
         caption.right {caption-side:right}
      </style>
   </head>

   <body>
   
      <table style = "width:400px; border:1px solid black;">
         <caption class = "top">
            This caption will appear at the top
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "bottom">
            This caption will appear at the bottom
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "left">
            This caption will appear at the left
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "right">
            This caption will appear at the right
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      
   </body>
</html>

Это даст следующий результат —

Свойство пустых ячеек

Свойство empty-cell указывает, должна ли отображаться граница в ячейке без содержимого.

Это свойство может иметь одно из трех значений — показать, скрыть или наследовать .

Вот свойство empty-cell, используемое для скрытия границ пустых ячеек в элементе <table>.

Live Demo 

<html>
   <head>
      <style type = "text/css">
         table.empty {
            width:350px;
            border-collapse:separate;
            empty-cells:hide;
         }
         td.empty {
            padding:5px;
            border-style:solid;
            border-width:1px;
            border-color:#999999;
         }
      </style>
   </head>

   <body>
   
      <table class = "empty">
         <tr>
            <th></th>
            <th>Title one</th>
            <th>Title two</th>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty">value</td>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty"></td>
         </tr>
      </table>
      
   </body>
</html>

Это даст следующий результат —

Свойство макета стола

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

Это свойство может иметь одно из трех значений: фиксированное, автоматическое или наследовать .

В следующем примере показана разница между этими свойствами.

ПРИМЕЧАНИЕ. — Это свойство не поддерживается многими браузерами, поэтому не полагайтесь на это свойство.

Live Demo 

<html>
   <head>
      <style type = "text/css">
         table.auto {
            table-layout: auto
         }
         table.fixed {
            table-layout: fixed
         }
      </style>
   </head>
   
   <body>
   
      <table class = "auto" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
      <br />
      
      <table class = "fixed" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
   
   </body>
</html>

Это даст следующий результат —

38
Share: