HTML un CSS iesācējiem (daļa 08): Tabulas (02)

Sākumā vēlos jums parādīt, kā šūnas vienā rindā var tikt savstarpēji savienotas pa kolonnām. Tādējādi tiek sasniegts, ka kolonna attiecīgajā rindā pārklājas vairākās kolonnās.

Piemērs:

<table border="1">
   <tr>
      <th colspan="2">Termiņi</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>

Pirms tam vārds par šeit izmantoto th-elementu. Ar šo elementu tiek atzīmētas galvenās šūnas. Pārlūki parasti šīs šūnas parāda treknas un centrētas. Un šeit ir rezultāts pārlūkprogrammā:

Iekšpusē ievadītajā th tiek iestatīts atribūts colspan. Kā vērtību gaidīsies kolonnu skaitu, pār kuru šūna veikalpojas. Neaizmirstiet pārliecināties, ka norādīto kolonnu skaits ir pareizs, pretējā gadījumā rezultāts var būt neatbilstošs. Šajā piemērā ar th atzīmēto galveno rindi vajadzētu izstiepties pār divām kolonnām. Atlikušajām divām rindām katrā atkal ir divas rindiņas.

Vēl viena atzīme par rindu savienošanu. Tabulām attīstības stadijā piešķiriet ietvaru (border). Tādējādi jums vienmēr būs iespēja uzreiz redzēt, vai savienošana notiek tā, kā vēlaties.

Šūnas vienā rindā savienot pa rindām

Ar atribūtu rowspan var savienot vairākas šūnas vienā rindā. Apsveramā šūna tad aptver vairākas rindas iekšpusē. Par to atkal piemērs:

<table border="1">
   <tr>
      <th rowspan="2">Krāsa</th>
      <td>Zila</td>
   </tr>
   <tr>
      <td>Zaļa</td>
   </tr>
   <tr>
      <th rowspan="2">Lielums</th>
      <td>1,70</td>
   </tr>
   <tr>
      <td>1,80</td>
   </tr>
</table>

Pārlūkprogrammā tas izskatās šādi:





rowspan-atribūtam tiek piešķirts skaitliskais vērtība. Tas galu galā nosaka rindu skaitu iekšpusē kolonnas, pār kuru šūna jāizstiepj. Arī šeit, protams, ir jāpārliecinās, ka norādīto rindu skaits ir pareizs.

Šūnas vienlaikus savienot pa rindām un kolonnām

Atribūtus rowspan un colspan var kombinēt kopā. Tādējādi var definēt šūnas, kas vienlaikus pārklājas vairākās rindās un kolonnās. Arī to atkal vislabāk var parādīt ar piemēru.

<table border="1">
   <tr>
      <th colspan="2" rowspan="2">Dzīvoklis</th>
      <td>5 istabas</td>
   </tr>
   <tr>
      <td>154 kv. m</td>
   </tr>
   <tr>
      <td>Šarlottenburga</td>
      <td>Stāvvietas</td>
      <td>Grīdas sildīšana</td>
   </tr>
</table>

Paskats uz pārlūku atgriež šādu rezultātu:





Apvienojot šos divus atribūtus, protams, vajadzīga rūpība, lai beigās šūnu skaits būtu īsti pareizs.

Apzīmēt tabulas

Ļoti interesanta iespēja, kā padarīt tabulu izpratnē saprotamāku, ir caption-elements. Šī elementa palīdzību var pievienot virsrakstu vai leģendu tabulai. caption saturs tiek parādīts attēlos tabulas ārpusē, lai gan tā definīcija notiek tabulā.

Šeit ir tipisks piemērs caption izmantošanai:





Tabulas virsotnē tiek parādīts tabulas virsraksts. Parasti virsraksts ir centrēts un atrodas virs tabulas. Protams, to var mainīt individuāli, izmantojot CSS.

caption-elements tiek definēts tieši aiz sākuma <table>.

Te ir pilnīgs sintakses pielietojums iepriekšējam piemēram:

<table border="1">
   <caption>Mediju dati</caption>
   <colgroup><col /><col /><col /><colgroup> 
   <thead>
      <tr>
         <th>Tēma</th>
         <th>Skatījumi</th>
         <th>Tendence</th>
      </tr>
   <thead>
   <tfoot> 
      <tr>
         <td colspan="3">Stāvoklis jūnijā 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>

Tabulu izveide

Tabulu izveide bija iespējama ar dažādiem atribūtiem iepriekšējās HTML versijās. Šeit ir daži piemēri par lietām, kuras varēja regulēt ar atribūtiem. (Protams, pārlūki vēl joprojām atbalsta šos atribūtus. Tomēr, HTML5 gadījumā tie netiek ieteicami).

• Ārējais rāmis

• Iekšējie tabulu rāmji

• Platuma un augstuma norādījumi

• Režģa līnijas

• Šūnu saturu izlīdzinājums

• Krāsas

• Fona attēli

Jūs redzat, ka visu var kontrolēt, izmantojot atbilstošos HTML atribūtus. Šajā piemērā tiek parādīta tabula, kurā šīs iespējas ir plaši izmantotas:

<table border="1">
   <tr>
      <td width="200" height="100" bgcolor="#999933">Viens</td>
      <td width="200" bgcolor="#00ffff">Divi</td>
      <td width="200">Trīs</td>
   </tr>
   <tr bgcolor="#ff00ff">
      <td height="100">Četri<</td>
      <td bgcolor="#996666">Pieci</td>
      <td bgcolor="#003333">Seši</td>
   </tr>
 </table>

Skatījoties uz rezultātiem, tiek iegūts vēlams rezultāts.

Lai arī izskatās tā, it kā viss būtu kārtībā, patiesībā tā aiz tā stāvošā sintakse nav īsti efektīva. Labāk ir šīs tabulas īpašības pārvaldīt, izmantojot CSS. Pateicoties jaunajām CSS īpašībām, ne tikai ir iespējams aizstāt vecos atribūtus ar mūsdienīgu sintaksi, bet ir arī iespējamas papildu funkcijas. Piemēram, tagad tabulas rindas var vienkārši iekrāsot izkārtojot tās pa pāra rindām un nepāra rindām.

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