HTML & CSS за начинаещи (Част 08): Таблица (02)

Първо бих искал да ви покажа как клетките в рамките на един ред може да се свържат колоно по колоно. Това постига това, че една колона в съответния ред се разпростира през няколко колони.

Пример:

<table border="1">
   <tr>
      <th colspan="2">Срокове</th>
   </tr>
   <tr>
      <td>11.4.2014</td>
      <td>12.4.2012</td>
   </tr>
   <tr>
      <td>13.4.2014</td>
      <td>14.4.2014</td>
   </tr>
   <tr>
      <td>15.4.2014</td>
      <td>16.4.2014</td>
   </tr>
</table>

Преди това една дума за използваният th елемент. Чрез този елемент се маркират заглавните клетки. Браузърите обикновено представят тези клетки като удебелени и центрирани. И ето резултата в браузъра:

Вътре в предварителното th се задава атрибутът colspan. Като стойност се очаква броят на колоните, през които трябва да се разпространи текущата клетка. Винаги внимавайте да посочите правилния брой на колоните, тъй като в противен случай резултатите могат да бъдат неприятни. В този пример заглавният ред, маркиран с th, трябва да се разпростира през две колони. В другите две реда отново всяка една имат по две колони.

Един съвет още, свързан със свързването на редове. По време на разработката задайте рамка (border) на таблиците. По този начин винаги ще виждате дали свързването наистина работи както очаквате.

Свързване на клетки в една колона ред по ред

Чрез атрибута rowspan може да свързвате няколко клетки в една колона. Съответната клетка се разпростира в рамките на колоната през няколко реда. Пак един пример:

<table border="1">
   <tr>
      <th rowspan="2">Цвят</th>
      <td>Синьо</td>
   </tr>
   <tr>
      <td>Зелено</td>
   </tr>
   <tr>
      <th rowspan="2">Размер</th>
      <td>1.70</td>
   </tr>
   <tr>
      <td>1.80</td>
   </tr>
</table>

В браузъра това изглежда по следния начин:





На атрибута rowspan се присвоява числена стойност. Тази стойност накрая определя броя на редовете в рамките на една колона, през които едината клетка трябва да се разпростира. Тук също е важно да се обърне внимание, че посоченият брой редове трябва да е правилен.

Едновременно свързване на клетки по ред и по колона

Двете атрибути rowspan и colspan могат също да се комбинират. По този начин може да определите клетки, които се разпростираят едновременно през няколко реда и колони. Пак се постига най-добре чрез пример.

<table border="1">
   <tr>
      <th colspan="2" rowspan="2">Апартамент</th>
      <td>5 стаи</td>
   </tr>
   <tr>
      <td>156 квадратни метра</td>
   </tr>
   <tr>
      <td>Шарлотенбург</td>
      <td>Място за паркиране</td>
      <td>Подово отопление</td>
   </tr>
</table>

Поглед в браузъра показва следните резултати:





При комбинирането на двете атрибута със сигурност трябва да се обърне внимание, за да се уверите, че броят на клетките е правилен.

Подписване на таблиците

Един много интересен начин да направите таблиците по-разбираеми е чрез елемента caption. Защото с това се добавя заглавие или легенда към таблица. Съдържанието на caption се показва винаги извън таблицата, въпреки че дефиницията му се намира в таблицата.

Ето типично приложение на caption:





Горе на таблицата се показва заглавие на таблицата. По подразбиране заглавието е центрирано горе на таблицата. Това разбира се може да се промени по индивидуален начин с CSS.

Елемента caption се дефинира отделно зад водещата <table>.

Ето пълната синтаксис от представения по-горе пример:

<table border="1">
   <caption>Податоци за медията</caption>
   <colgroup><col /><col /><col /><colgroup> 
   <thead>
      <tr>
         <th>Тема</th>
         <th>Посещения</th>
         <th>Тенденция</th>
      </tr>
   <thead>
   <tfoot> 
      <tr>
         <td colspan="3">На юни 2014 година</td>
      </tr>
   <tfoot> 
   <tbody>
      <tr>
         <td>HTML5</td>
         <td>12.245</td>
         <td>+</td>
      </tr>
      <tr>
         <td>CSS3</td>
         <td>12123</td>
         <td>+</td>
      </tr>
      <tr>
         <td>JavaScript</td>
         <td>11.546</td>
         <td>+</td>
      </tr>
   </tbody>
</table>

Създаване на таблици

За оформянето на таблици, в по-ранни версии на HTML, съществуваха множество атрибути. Ето някои примери за неща, които можеха да се настроят с помощта на атрибути. (Разбира се, браузърите все още поддържат тези атрибути и до днес. Въпреки това, в HTML5 те все още не би трябвало да се използват).

• Външен рамки

• Вътрешни рамки на таблици

• Широчина и височина

• Мрежести линии

• Подреждане на съдържанието на клетките

• Цветове

• Фонови изображения

Вече виждате, че всичко може да се контролира чрез съответните HTML атрибути. Следващият пример показва таблица, в която тези възможности са използвани обилно:

<table border="1">
   <tr>
      <td width="200" height="100" bgcolor="#999933">Едно</td>
      <td width="200" bgcolor="#00ffff">Две</td>
      <td width="200">Три</td>
   </tr>
   <tr bgcolor="#ff00ff">
      <td height="100">Четири</td>
      <td bgcolor="#996666">Пет</td>
      <td bgcolor="#003333">Шест</td>
   </tr>
 </table>

Погледът върху резултата представя желания резултат.

Но въпреки че това изглежда така, както трябва да изглежда, синтаксисът зад него наистина не е ефективен. По-добре е, ако се управляват свойствата на таблицата чрез CSS. Благодарение на новите свойства на CSS, не само че можем да заменим старите атрибути с модерен синтаксис. Можем също така да реализираме допълнителни функционалности. Например, вече е лесно да оцветяваме редове в таблицата си по алтернативен начин.

В по-ранните времена на HTML и CSS за постигане на такъв резултат трябваше да се правят понякога големи изкривявания на кода. Като се се обединят възможностите, които вече предлага CSS, е толкова лесно да се постигне нещо подобно.

tr:nth-child(even) {
   background-color: #fd9d5d;
}
 tr:nth-child(odd) {
   background-color: #c0f390;
}
 table {
   border-spacing: 0px;
}

Както вече беше споменато многократно, ще разгледам подробно CSS в рамките на този цикъл.