abc HTML5 i CSS TUTORIAL

Poravnanje sadržaja tabele /TABLE ALIGN CONTENT/ {text-align:}


Slika 1. Korištenje atributa - Interni CSS /INTERNAL CSS/

Poravnanje sadržaja tabele /TABLE ALIGN CONTENT/ {text-align:}   Korištenje internog CSS-a se izvodi u oba dijela HTML fajla: Sintaksa:

  • HEAD dio (za tabelu): <style> table {text-align: Vrsta_poravananja;}</style>
  • BODY dio: <table>

Oznake:
table - TAG tabele - boja pozadine cijele tabele.
text-align - Atribut poravnanja teksta

Vrsta poravnanja:
LEFT - lijevo
CENTER - centrirano
RIGHT - desno
JUSTIFY - obe strane

Kreiranje internog iz linijskog css-a /INTERNAL CSS FROM LINE CSS/ u BODY TAG-u

Primjer 1. Kreirati tabelu sa dva reda i dvije kolone. Tekst u prvoj ćeliji je Lijeva a u drugoj ćeliji je Desna. Drugi red ima sadžaj: Lijeva drugi red i Desna drugi red. Deblijna linja tabele je 1. Poravnanje centrirano.

Kod Objašnjenje Ispis na ekran

<!DOCTYPE html>
<html>
<head><title>Tabela - centrirano</title>
<style>
table {
text-align:center;
}
</style>
</head>
<body>
<table width="100%" border="1">
  <tr>
    <td>Lijeva</td>
    <td>Desna</td>
  </tr>
  <tr>
    <td>Lijeva drugi red</td>
    <td>Desna drugi red </td>
  </tr>
</table>
</body></html>

Poravnanje center - Centrirano.
Lijeva Desna
Lijeva drugi red Desna drugi red

Primjer 2. Kreirati tabelu sa dva reda i dvije kolone. Tekst u prvoj ćeliji je Lijeva a u drugoj ćeliji je Desna. Drugi red ima sadžaj: Lijeva drugi red i Desna drugi red. Deblijna linja tabele je 1. Poravnanje desno (RIGHT).

Kod Objašnjenje Ispis na ekran

<!DOCTYPE html>
<html>
<head><title>Tabela - desno</title>
<style>
table {
text-align:right;
}
</style>
</head>
<body>
<table width="100%" border="1">
  <tr>
    <td>Lijeva</td>
    <td>Desna</td>
  </tr>
  <tr>
    <td>Lijeva drugi red</td>
    <td>Desna drugi red </td>
  </tr>
</table>
</body></html>

Poravnanje right - Desno.
Lijeva Desna
Lijeva drugi red Desna drugi red

Primjer 3. Kreirati tabelu sa dva reda i dvije kolone. Tekst je kao na slici. Deblijna linja tabele je 1. Poravnanje centrirano.

Kod Objašnjenje Ispis na ekran

<!DOCTYPE html>
<html>
<head><title>Tabela - obe </title>
<style>
table {
text-align:justify;
}
</style>
</head>
<body>
<table width="100%" border="1">
  <tr>
    <td>Vječno "prežvakavanje" vlastitih grešaka psihički je štetno i ima loše posljedice po zdravlje.</td>
    <td>Mudar čovjek s podjednakom mirnoćom prima pohvale i podnosi uvrede.</td>
  </tr>
  <tr>
    <td>Lijeva drugi red</td>
    <td>Desna drugi red </td>
  </tr>
</table>
</body></html>

Poravnanje center - Centrirano.
Vječno "prežvakavanje" vlastitih grešaka psihički je štetno i ima loše posljedice po zdravlje. Mudar čovjek s podjednakom mirnoćom prima pohvale i podnosi uvrede.
Lijeva drugi red Desna drugi red

Primjer 4. Kreirati tabelu sa dva reda i dvije kolone. Tekst u prvoj ćeliji je Lijeva a u drugoj ćeliji je Desna. Drugi red ima sadžaj: Lijeva drugi red i Desna drugi red. Deblijna linja tabele je 1. Poravnanje centrirano, boja tabele je žuta. Engleski naziv boje je YELLOW..

Kod Objašnjenje Ispis na ekran

<!DOCTYPE html>
<html>
<head><title>Tabela - centrirano i žuta</title>
<style>
table {
text-align:center;
background-color:yellow;
}
</style>
</head>
<body>
<table width="100%" border="1">
  <tr>
    <td>Lijeva</td>
    <td>Desna</td>
  </tr>
  <tr>
    <td>Lijeva drugi red</td>
    <td>Desna drugi red </td>
  </tr>
</table>
</body></html>

Boja pozadine ćelije je žuta. Engleski naziv boje je YELLOW.
Lijeva Desna
Lijeva drugi red Desna drugi red

Daljnji rad 1: Kreirati tabelu sa četiri reda i tri kolone. Centrirano poravnanje. Svi sadržaji povezani za jednu tematsku cjelinu.

(Pri pisanju se mogu koristiti standardne opcije EDIT/COPY, EDIT/PASTE).

Prozor na dnu stranice je namjenje za provjeru koda:
- kopirajte kod (edit, copy, paste ili CTRL+C, CTRL+V ili DRAG&DROP metodom), editovanje je moguće u prozoru

Index