Első táblázat, natúr megjelenésű.

A natúr táblázat XHTML - fájlban történő megírásával, az első témakörben már találkoztunk.
Különbség: Ott, más a cellák tartalma és nincs hozzárendelve CSS, azaz stíluslap.

 

Második táblázat, színezve.

A táblázat háttérszíne, szürke színre ( #ccc ) van beállítva. Ebből adódóan azon cellák, melyekhez nem rendeltünk külön háttérszínt, szürke háttérszínben láthatók.
További cellákhoz és cellasorokhoz, stíluslapon készítjük el azon meghatározásokat, melyek megváltoztatják, a keretszínt, háttérszínt, betűformát, betűszínt.

A fent látható táblázatot, most css, azaz stiluslappal formázzuk.

Hól van, ami fontos lehet	Pince		Kamra
	Csomagok	Tétel	Megnevezés	Tétel
Barack	Dobozba	kg. 5.5	Talicska	db.1
Alma	Polcon	kg. 15.5	Kapa	db. 2
Tej	Dobozos	db. 10	Vasvilla	db. 1
Szilva	Rekeszbe	kg. 5.6	Cucafa	db. 3
Bór	Hordóba	liter. 88.99	Balta	db. 4

---

Megírása XHTML - fájlban
Ismertető:
Az XHTML - lapon történő megírása, megegyezik a fenti Első natúr megjelenésű táblázat megírásával.
Annyiban módosul, hogy egyes cellákhoz, cellasorokhoz, egyedi azonosítót ( nevet ) rendelünk.

Azon részek vannak kiemelve különböző színekkel, melyeket elláttunk egyedi azonosítóval, és a css, azaz stíluslappal fogunk megformázni. Iboly, Türkiz, Kék, Sárga, és Piros szín.
Kivétel:
Zöld színű: Ha alkalmazzuk, akkor azon weblapnézők, akik rendelkeznek felolvasó programmal, a program beolvassa az így beírt szöveget. summary="Színes táblázat."
Rózsaszínű: Ezen cellasor, cellái üresek. Ezért, most a cellák, nem kaptak külön azonosítót. Háttérszínüket, a cellasor kezdő címkéjében megadott , azonosítóval ( hatodiksorszin ) fogjuk a stíluslapon meghatározni.
<tr class="hatodiksorszin">

A programleírást megnézem. View.

---

 

Ismertető:

1. A táblázat elnevezésében szereplő betűk, mérete formája: caption { font-size: 2em; font-weight: bold;}
2. Táblázat: háttérszíne, szélessége és a cellák egymástól való távolsága.
table { background: #ccc; width: 90%; border-collapse: separate; border-spacing: 5px; }
3. A th típusú cellák: szélessége és színe: th { width: 30%; background: aqua;}
4. Cellák keretének: vonalvastagsága, színe és cellamagassága
th {border: 4px solid lime; padding: 2px;}
td {border: 2px solid #03c; padding: 5px;}
5. A td cellákban, a szöveg elhelyezkedése, pozíciója: td { text-align: center; }

A különböző színek segítségével könnyen azonosíthatjuk, hogy a meghatározások melyik, az XHTML – lapon megírt azonosítóra vonatkoznak.
Ibolyaszín: Hól van, ami fontos lehet szöveget tartalmazó, cellára vonatkozik.
Türkiz szín: Cellák és cellasorok háttérszínét határozzuk meg.
Kék szín: Betűt és háttérszínt formázzuk.
Sárga szín: Csak a betűket formázzuk.
Piros szín: Ezen cellák betűi, egyforma megjelenésűek lesznek. Ez a példa arra is jó szemléltetés, hogy egyetlen meghatározással, több cella vagy cellasor betűit egyforma megjelenésűre formázhatunk.
Ahhoz, hogy ezt megtehessük, az XHTML – lapon, ezen cellákat egyforma névvel, azaz azonosítóval kell ellátnunk.

Megjegyzés: A bemutatóban, két külön sorban láthatjuk a th meghatározásokat, és két külön sorban a td meghatározásokat. Most a jobb áttekinthetőség miatt írtam külön, külön sorba.
Megírásuk:
th { width: 30%; background: aqua; border: 4px solid lime; padding: 2px; }
td { text-align: center; border: 2px solid #03c; padding: 5px; }

A következ utasításokat az Explorer nem veszi figyelembe:
border-collapse; border-separate; border-spacing:
A Mozilla Firefox, csak a cellatávolságra reagál, border-spacing:
Ha ezeket a meghatározásokat nem adjuk meg, a táblázatunk akkor is jól olvasható, áttekinthető.

A stílusleírást megnézem. View.

---

 

Vissza a lap elejére

Megjegyzés:
Ha egy weboldalon belül, több különböző színezetű táblázatot is készítünk, akkor azokat külön div szakaszban helyezzük el, és a táble címkéknek különböző azonosítot, azaz nevet kell adni.
Példa: <table class="szines">
Majd, ugyanezen azonosítóhoz kell rendelni, a th és td cellák keretének: vonalvastagságát, színét és cellamagasságát.
Példa: .szines th { meghatározás megírása }vagy .szines td {meghatározás megírása}