Lähtekoodi kasutamine tabeli kujundamisel

Enne, kui asud lähtekoodiga muudatusi tegema, proovi kasutada kõiki tööriista võimalusi.

Kui aga tavapärastest kujundusvahenditest jääb puudu, siis proovime selle artikli abil anda edasi näiteid, milliseid kujunduselemente on võimalik veel teha, et sinu dokumenid mallid või N: projekti kirjeldus oleks lihtsamini loetav.

Hoiatus!
Kui sa ei ole kindel, kuidas täpselt lähtekoodi kasutada siis:
1. pöördu kellegi poole, kes on antud teemaga rohkem kursis

2. kasuta Chat GPT abi kujundamisel - kuidas kasutada - selle juhedi leiad siit

3. testi eraldi testimise ülesandel tulemit mille eesmärki soovid saavutada

Siin üritame selgitada, kuidas rakendada HTML-elementidele inline-stiile ilma välist CSS-i kasutamata. See võimaldab kiiret ja lihtsat vormindamist ilma täiendavate failideta. Allpool on toodud erinevad stiilitehnikad, mida saab otse HTML-attribuutides rakendada.

Kasutades lisaks tavapärastele tööriistadadele saad tabelite kujundust täiendada koodide abil kujundada järgneva tabeli:

Selle lähtekoodi näidise leiad kõige lõpus olevast koodist.

1. Teksti vormindamine

Eesmärk: Teksti esiletõstmine ja erinevate stiilide rakendamine võib aidata kasutajatel olulist infot kiiremini märgata.

Rasvane tekst: <td style="font-weight: bold;">Rasvane näide</td>
Kaldkiri: <td style="font-style: italic;">Kaldkiri näide</td>
Allajoonitud tekst: <td style="text-decoration: underline;">Allajoonitud näide</td>
Läbikriipsutatud tekst: <td style="text-decoration: line-through;">Läbikriipsutatud näide</td>

2. Teksti joondamine

Eesmärk: Joondus mõjutab teksti loetavust ja esteetikat ning võimaldab paremat andmete paigutust tabelites.

Vasakjoondus: <td style="text-align: left;">Vasakjoondus</td>
Keskjoondus: <td style="text-align: center;">Keskjoondus</td>
Paremjoondus: <td style="text-align: right;">Paremjoondus</td>

3. Fondi ja suuruse kohandamine

Eesmärk: Fondi suuruse ja tüübi muutmine võimaldab teatud andmeid visuaalselt paremini esile tuua.

Suurem tekst: <td style="font-size: 1.5em;">Suur tekst</td>
Monospace font: <td style="font-family: monospace;">Monospace näide</td>
Värviline tekst: <td style="color: red;">Punane tekst</td>

4. Taust ja äärised

Eesmärk: Taustavärvid ja lahtri äärised muudavad tabelid visuaalselt struktureeritumaks ja paremini loetavaks.

Taustavärv: <td style="background-color: #f0f0f0;">Hall taust</td>
Lahtri ääris: <td style="border: 1px solid #ddd;">Lahtriga ääris</td>
Täidis ruumi loomiseks: <td style="padding: 8px;">Lahter täidisega</td>

5. Mitme stiili ühendamine

Eesmärk: Kasutades mitut stiili korraga, saab tabelitest ja andmetest visuaalselt atraktiivsemad.

<td style="text-align: center; font-weight: bold; background-color: yellow; border: 1px solid black;">Stiilitud lahter</td>

6. Erijuhtumid

Eesmärk: Teksti muutmine suurtähtedeks või väiketähtedeks aitab standardiseerida andmete kuvamist.

Suurtähed: <td style="text-transform: uppercase;">suurtähed</td>
Väiketähed: <td style="text-transform: lowercase;">SUURTÄHED</td>

7. Tabeli joondamise variatsioonid

Eesmärk: Tabelite joondamine erinevatesse kohtadesse aitab kujundust ja ruumikasutust optimeerida.

7.1 Tabel kitsamalt lehe paremas servas

<div style="width: 100%; display: flex; justify-content: flex-end;"> <table style="width: 50%; border-collapse: collapse; text-align: center;">

7.2 Tabel 50% ulatuses lehe keskel

<div style="width: 100%; display: flex; justify-content: center;"> <table style="width: 50%; border-collapse: collapse; text-align: center;">

7.3 Tabel paremas servas

<div style="width: 100%; display: flex; justify-content: flex-end;"> <table style="width: 40%; border-collapse: collapse; text-align: center;">

7. Tabeli Vormindamise Juhend

7.1. Ääriste Stiilid

Eesmärk: Määratleb erinevad ääriste tüübid, mis aitavad tabeli struktuuri selgemaks muuta.

Solid – Pidev joon
Dotted – Punktiirjoon
Dashed – Katkendlik joon
Double – Kahekordne joon
Groove – 3D sisse vajutatud efekt
Ridge – 3D reljeefne efekt
Inset – Sissepoole surutud piir
Outset – Väljapoole tõstetud piir
Hidden – Peidetud piir (säilitab ruumi)
None – Puudub piir

7.2. Ääriste Paksus (pikslite mõju)

Eesmärk: Määratleb ääriste nähtavuse olenevalt nende paksusest.

1-2px - Peenike ja peaaegu nähtamatu piir
3-5px - Keskmise nähtavusega piir
6px+ - Tugev ja silmapaistev piir

7.3. Ääriste Värvimine

Eesmärk: Värvi kasutamine aitab eristada ja visuaalselt paremini esile tuua erinevaid tabeleid.

border: 3px solid red; /* Punane pidev joon */ border: 5px dashed blue; /* Sinine katkendlik joon */ border: 4px groove gray; /* Hall sooniline joon */

7.4. Kombineeritud Ääristiilid

Eesmärk: Erinevate ääriste kombineerimine, et parandada tabelite loetavust ja struktuuri.

border-top: 3px solid black; border-right: 2px dashed red; border-bottom: 4px double blue; border-left: 5px ridge green;

7.5. Tabeli Kujunduse Täiustamine

Eesmärk: Lisab tabelile rohkem loetavust ja visuaalset atraktiivsust.

Tühjade ridade lisamine parandab visuaalset eraldatust.
Erinevate px väärtuste kasutamine aitab ääriste paksust paremini eristada.

7.6. Tähtis märkus

Eesmärk: Lahendada brauseri vaikekäitumine, mis surub tühjad read kokku, võimaldades lisada visuaalselt eristatavaid vahepealse kõrgusega ridu tabelisse.

<tr> <td colspan="4" style="height: 2px; border: none; padding: 0; line-height: 2px; font-size: 0;">&nbsp;</td> </tr>

Ilma  -ta brauser surub tühjad read kokku ja kõrgus ei rakendu õigesti!

Näidis: Antud näites on toodud kõik võimalikud äärise stiilid.

<div style="width: 100%; display: flex; justify-content: center; margin: 20px 0;">
  <table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; text-align: left;">
    <tr>
      <td colspan="1" rowspan="1" style="border: 2px solid black; padding: 10px; background-color: #f0f0f0; font-weight: bold;">
        <p><strong>Stiili Nimi</strong></p>
      </td>
      <td colspan="1" rowspan="1" style="border: 2px solid black; padding: 10px; background-color: #f0f0f0; font-weight: bold;">
        <p><strong>Näide</strong></p>
      </td>
      <td colspan="1" rowspan="1" style="border: 2px solid black; padding: 10px; background-color: #f0f0f0; font-weight: bold;">
        <p><strong>CSS Kood</strong></p>
      </td>
      <td colspan="1" rowspan="1" style="border: 2px solid black; padding: 10px; background-color: #f0f0f0; font-weight: bold;">
        <p><strong>Piiri Laiuse Mõju</strong></p>
      </td>
    </tr>
    <tr>
      <td colspan="4" rowspan="1" style="height: 2px; border: none; padding: 0; line-height: 2px; font-size: 0; content: '&nbsp;'">
        <p></p>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1" style="border: 5px dashed red; padding: 10px;">
        <p>Katkendlik</p>
      </td>
      <td colspan="1" rowspan="1" style="border: 3px dashed red; padding: 10px;">
        <p>Näide</p>
      </td>
      <td colspan="1" rowspan="1" style="border: 2px dashed red; padding: 10px;">
        <p>border: 5px / 3px dashed red;</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 10px;">
        <p>Paksuse suurenemine teeb joone katkendlikkuse selgemaks.</p>
      </td>
    </tr>
    <tr>
      <td colspan="4" rowspan="1" style="height: 2px; border: none; padding: 0; line-height: 2px; font-size: 0; content: '&nbsp;'">
        <p></p>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1" style="border: 5px dotted blue; padding: 10px;">
        <p>Punktiir</p>
      </td>
      <td colspan="1" rowspan="1" style="border: 3px dotted blue; padding: 10px;">
        <p>Näide</p>
      </td>
      <td colspan="1" rowspan="1" style="border: 2px dotted blue; padding: 10px;">
        <p>border: 5px / 3px dotted blue;</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 10px;">
        <p>Suurem px väärtus toob punktid rohkem esile.</p>
      </td>
    </tr>
    <tr>
      <td colspan="4" rowspan="1" style="height: 2px; border: none; padding: 0; line-height: 2px; font-size: 0; content: '&nbsp;'">
        <p></p>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1" style="border: 5px double black; padding: 10px;">
        <p>Topeltjoon</p>
      </td>
      <td colspan="1" rowspan="1" style="border: 3px double black; padding: 10px;">
        <p>Näide</p>
      </td>
      <td colspan="1" rowspan="1" style="border: 2px double black; padding: 10px;">
        <p>border: 5px / 3px double black;</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 10px;">
        <p>Suurem px muudab kahe joone vahelise ala eristuvamaks.</p>
      </td>
    </tr>
    <tr>
      <td colspan="4" rowspan="1" style="height: 2px; border: none; padding: 0; line-height: 2px; font-size: 0; content: '&nbsp;'">
        <p></p>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1" style="border: 5px groove black; padding: 10px;">
        <p>Groove</p>
      </td>
      <td colspan="1" rowspan="1" style="border: 3px groove black; padding: 10px;">
        <p>Näide</p>
      </td>
      <td colspan="1" rowspan="1" style="border: 2px groove black; padding: 10px;">
        <p>border: 5px / 3px groove black;</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 10px;">
        <p>Paksus süvendab 3D efekti.</p>
      </td>
    </tr>
    <tr>
      <td colspan="4" rowspan="1" style="height: 2px; border: none; padding: 0; line-height: 2px; font-size: 0; content: '&nbsp;'">
        <p></p>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1" style="border: 5px ridge black; padding: 10px;">
        <p>Ridge</p>
      </td>
      <td colspan="1" rowspan="1" style="border: 3px ridge black; padding: 10px;">
        <p>Näide</p>
      </td>
      <td colspan="1" rowspan="1" style="border: 2px ridge black; padding: 10px;">
        <p>border: 5px / 3px ridge black;</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 10px;">
        <p>Mida suurem px, seda kõrgem reljeefne efekt.</p>
      </td>
    </tr>
    <tr>
      <td colspan="4" rowspan="1" style="height: 2px; border: none; padding: 0; line-height: 2px; font-size: 0; content: '&nbsp;'">
        <p></p>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1" style="border: 5px inset black; padding: 10px;">
        <p>Sissepoole surutud</p>
      </td>
      <td colspan="1" rowspan="1" style="border: 3px inset black; padding: 10px;">
        <p>Näide</p>
      </td>
      <td colspan="1" rowspan="1" style="border: 2px inset black; padding: 10px;">
        <p>border: 5px / 3px inset black;</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 10px;">
        <p>Suurem px väärtus suurendab varjutuse efekti.</p>
      </td>
    </tr>
    <tr>
      <td colspan="4" rowspan="1" style="height: 2px; border: none; padding: 0; line-height: 2px; font-size: 0; content: '&nbsp;'">
        <p></p>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1" style="border: 5px outset black; padding: 10px;">
        <p>Väljapoole tõstetud</p>
      </td>
      <td colspan="1" rowspan="1" style="border: 3px outset black; padding: 10px;">
        <p>Näide</p>
      </td>
      <td colspan="1" rowspan="1" style="border: 2px outset black; padding: 10px;">
        <p>border: 5px / 3px outset black;</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 10px;">
        <p>Suurem px annab tugevama kolmemõõtmelise efekti.</p>
      </td>
    </tr>
    <tr>
      <td colspan="4" rowspan="1" style="height: 2px; border: none; padding: 0; line-height: 2px; font-size: 0; content: '&nbsp;'">
        <p></p>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1" style="border: 5px solid black; padding: 10px;">
        <p>Tavaline piire</p>
      </td>
      <td colspan="1" rowspan="1" style="border: 3px solid black; padding: 10px;">
        <p>Näide</p>
      </td>
      <td colspan="1" rowspan="1" style="border: 2px solid black; padding: 10px;">
        <p>border: 5px / 3px solid black;</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 10px;">
        <p>Suurem px muudab piiri tugevamaks ja selgemaks.</p>
      </td>
    </tr>
  </table>
</div>

9. Kujundatud tabeli näidis

Eesmärk: See näidistabel kombineerib erinevaid stiile ja joondusvõimalusi, pakkudes maksimaalselt esteetilist ja funktsionaalset lahendust.

<div style="width: 100%; display: flex; justify-content: center; margin: 20px 0;">
  <table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; text-align: center;">
    <tr>
      <th colspan="1" rowspan="1">
        <p><strong>Ametikoht</strong></p>
      </th>
      <th colspan="1" rowspan="1">
        <p><em>Ühik</em></p>
      </th>
      <th colspan="1" rowspan="1">
        <p><u>Ühikute arv</u></p>
      </th>
      <th colspan="1" rowspan="1">
        <p>Ühiku hind</p>
      </th>
      <th colspan="1" rowspan="1">
        <p>Abikõlblike kulude maksumus kokku</p>
      </th>
      <th colspan="1" rowspan="1">
        <p>Toetus</p>
      </th>
      <th colspan="1" rowspan="1">
        <p>Projekti elluviija omafinantseering</p>
      </th>
    </tr>
    <tr>
      <td colspan="1" rowspan="1" style="padding: 12px; border: 1px solid #ddd; background-color: #ffffe0;">
        <p>Projektijuht</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 10px; border: 1px solid #ddd; font-weight: bold;">
        <p><strong>kuu</strong></p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; font-size: 1.2em;">
        <p>18.00</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; font-style: italic;">
        <p><em>733.00</em></p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; color: green;">
        <p>13,194.00</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; font-family: monospace;">
        <p>11,214.90</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; text-align: right;">
        <p>1,979.10</p>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; background-color: #e6f7ff;">
        <p>Projekti koordinaator</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; font-weight: bold;">
        <p><strong>kuu</strong></p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; text-decoration: line-through;">
        <p><s>18.00</s></p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; font-style: italic;">
        <p><em>495.00</em></p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; color: green;">
        <p>8,910.00</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; font-family: monospace;">
        <p>7,573.50</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; text-align: right;">
        <p>1,336.50</p>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; background-color: #f0fff0;">
        <p>Tehniline konsultant</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; font-weight: bold;">
        <p><strong>kuu</strong></p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd;">
        <p>18.00</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; font-style: italic;">
        <p><em>500.00</em></p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; color: green;">
        <p>9,000.00</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; font-family: monospace;">
        <p>7,650.00</p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; text-align: right;">
        <p>1,350.00</p>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; background-color: #d3d3d3;">
        <p></p>
      </td>
      <td colspan="3" rowspan="1" style="border: 1px solid #ddd; background-color: #d3d3d3;">
        <p style="text-align: right"><strong>Kokku personalikulu:</strong></p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; font-weight: bold;">
        <p><strong>31,104.00</strong></p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; font-weight: bold;">
        <p><strong>26,438.40</strong></p>
      </td>
      <td colspan="1" rowspan="1" style="padding: 8px; border: 1px solid #ddd; font-weight: bold; text-align: right;">
        <p><strong>4,665.60</strong></p>
      </td>
    </tr>
  </table>
</div>

Seotud artiklid

Ettevõtte üldplank