Getting Tabular: tables and lists

Tabele:

<table> tabela
<tr> table row (red -). Tabele u HTML-u se uvek definišu kroz REDOVE (u kodu kucate samo redove, kolone se same stvaraju u zavisnosti od toga koliko novih redova započnete).
<th> table Heading, po default-u bold i centrirano. Mora biti unutar <tr>-a.
<td> table data/cell (ono sto se sadrži u tabeli: text, slike, liste, druge tabele, ...) takođe mora biti unutar <tr>-a. Može biti PRAZAN (samo tagovi bez sadržaja).
<caption> naslov tabele, stoji odmah iznad tabele (mesto može da se menja u CSS-u sa caption-side osobinom). U HTML-u se piše ispod <table>, a ispred prvog <tr>.

<table id="mange">
	<caption>Shōnen manga</caption>

	<tr>
		<td>Manga</td>
		<th>Author</th>
		<th>Protagonist</th>
		<th>Original run</th>
		<th>Tankōbon volumes</th>
		<th>Copies sold</th>
		<th>Wikia</th>
	</tr>
	
	<tr>
		<th>Dragon Ball</th>
		<td>Akira Toriyama</td>
		<td>Son Goku (Kakarrot)</td>
		<td>November 20, 1984 – May 23, 1995</td>
		<td>42</td>
		<td>240 million</td>
		<td><a href="http://dragonball.wikia.com/" target="_blank" title="Dragon Ball Wikia">DB Wiki</a></td>
	</tr>
	
	<tr>
		<th>One Piece</th>
		<td>Eiichiro Oda</td>
		<td>Monkey D. Luffy</td>
		<td>July 19, 1997 – present</td>
		<td>86...</td>
		<td>416 million</td>
		<td><a href="http://onepiece.wikia.com/" target="_blank" title="One Piece Encyclopedia">OP Wiki</a></td>
	</tr>
	
	<tr>
		<th>Hunter × Hunter</th>
		<td>Yoshihiro Togashi</td>
		<td>Gon Freecss</td>
		<td>March 3, 1998 – present</td>
		<td>34...</td>
		<td>66 million</td>
		<td><a href="http://hunterxhunter.wikia.com/" target="_blank" title="Hunter × Hunter Wikia">Hunterpedia</a></td>
	</tr>
	
	<tr>
		<th>Naruto</th>
		<td>Masashi Kishimoto</td>
		<td>Naruto Uzumaki</td>
		<td>September 21, 1999 – November 10, 2014</td>
		<td>72</td>
		<td>220 million</td>
		<td><a href="http://naruto.wikia.com/" target="_blank" title="Naruto Wikia">Narutopedia</a></td>
	</tr>
	
	<tr>
		<th>Fullmetal Alchemist</th>
		<td>Hiromu Arakawa</td>
		<td>Edward Elric</td>
		<td>July 12, 2001 – June 12, 2010</td>
		<td>27</td>
		<td>67 million</td>
		<td><a href="http://fma.wikia.com/" target="_blank" title="Fullmetal Alchemist Wikia">FMA Wiki</a></td>
	</tr>
	
	<tr>
		<th>Bleach</th>
		<td>Tite Kubo</td>
		<td>Ichigo Kurosaki</td>
		<td>August 20, 2001 – August 22, 2016</td>
		<td>74</td>
		<td>90 million</td>
		<td><a href="http://bleach.wikia.com/" target="_blank" title="Bleach Wikia">Bleach Wiki</a></td>
	</tr>
	
	<tr>
		<th>Fairy Tail</th>
		<td>Hiro Mashima</td>
		<td>Natsu Dragneel</td>
		<td>August 2, 2006 – July 26, 2017</td>
		<td>63</td>
		<td>60 million</td>
		<td><a href="http://fairytail.wikia.com/" target="_blank" title="Fairy Tail Wikia">FT Wiki</a></td>
	</tr>
	
	<tr>
		<th>Toriko</th>
		<td>Mitsutoshi Shimabukuro</td>
		<td>Toriko</td>
		<td>May 19, 2008 – November 21, 2016</td>
		<td>43</td>
		<td>20 million</td>
		<td><a href="http://toriko.wikia.com/" target="_blank" title="Toriko Encyclopedia">Toriko Wiki</a></td>
	</tr>
	
</table>

Shōnen manga
Manga	Author	Protagonist	Original run	Tankōbon volumes	Copies sold	Wikia
Dragon Ball	Akira Toriyama	Son Goku (Kakarrot)	November 20, 1984 – May 23, 1995	42	240 million	DB Wiki
One Piece	Eiichiro Oda	Monkey D. Luffy	July 19, 1997 – present	86...	416 million	OP Wiki
Hunter × Hunter	Yoshihiro Togashi	Gon Freecss	March 3, 1998 – present	34...	66 million	Hunterpedia
Naruto	Masashi Kishimoto	Naruto Uzumaki	September 21, 1999 – November 10, 2014	72	220 million	Narutopedia
Fullmetal Alchemist	Hiromu Arakawa	Edward Elric	July 12, 2001 – June 12, 2010	27	67 million	FMA Wiki
Bleach	Tite Kubo	Ichigo Kurosaki	August 20, 2001 – August 22, 2016	74	90 million	Bleach Wiki
Fairy Tail	Hiro Mashima	Natsu Dragneel	August 2, 2006 – July 26, 2017	63	60 million	FT Wiki
Toriko	Mitsutoshi Shimabukuro	Toriko	May 19, 2008 – November 21, 2016	43	20 million	Toriko Wiki

Stilizovanje tabele:

Tabele stilizujemo u CSS-u, naravno. CSS koji smo primenili na gornju tabelu:

table#mange {
	border: thin solid black;
	text-align: center;
	margin-right: 40px;
	caption-side: bottom;
}

table#mange th {
	background-color: silver;
}

table#mange td, table#mange th {
	border: thin dotted gray;
	padding: 5px;
}

table#mange caption {
	font-style: italic;
	padding-top: 8px;
}

caption-side osobina, pomera <caption> za tabele (top, right, bottom, left).

border-spacing, prostor između cell-ova tabele. Ćelije imaju padding i border, ali umesto margina koristimo border-spacing property (napominjem da ovu osobinu nismo koristili na primeru gornje tabele).

border-spacing: 10px 30px;

10px je horizontalni prostor a 30px vertikalni. Padding i border se definišu za ćelije, a border-spacing za CELU tabelu.

border-collapse: collapse; borderi ćelija u tabeli koji su jedni do drugih se dodiruju, prostor između njih nestaje, SPAJAJU se u jednu liniju.

Sadržaj ćelija možete da pomerate text-align osobinom, samo napravite klase za npr. centrirano i/ili levo, desno. Zatim dodelite sadržaj ćelija klasama.

Takođe, za pomeranje sadržaja unutar ćelija tabele koristi se i vertical-align osobina (određuje vertikalni položaj elementa).

background-color osobinom bojite pozadinu ćelija. Dodeljivanjem ćelija različitim klasama možete da obojite svaku ćeliju u različitu boju (mada je preporučljivo da svaki DRUGI red bude jednobojan, zbog preglednosti).

Rowspan & colspan:

rowspan atribut za <td>, BROJ redova (po vertikali) koje table data/cell može da zauzima. U slučaju da postoje "normalni" cell-ovi u istom redu, moramo u novom <tr>-u da dodamo <td>-e koji popunjavaju praznine:

<table class="span">

	<tr>
		<th>A</th>
		<th>B</th>
		<th>C</th>
		<th>D</th>
		<th>E</th>
	</tr>

	<tr>
		<td>avion</td>
		<td>bazen</td>
		<td>centar</td>
		<td>dolina</td>
		<td>evolucija</td>
	</tr>

	<tr>
		<td rowspan="2">asketa</td>
		<td>belo</td>
		<td rowspan="2">cisterna</td>
		<td>dan</td>
		<td rowspan="2">ekser</td>
	</tr>

	<tr>
		<td class="palegreen">ISPOD belo</td>
		<td class="palegreen">ISPOD dan</td>
	</tr>

	<tr>
		<td>aleja</td>
		<td>bagrem</td>
		<td>celo</td>
		<td>drvo</td>
		<td>euforija</td>
	</tr>

</table>

A	B	C	D	E
avion	bazen	centar	dolina	evolucija
asketa	belo	cisterna	dan	ekser
asketa	ISPOD belo	cisterna	ISPOD dan	ekser
aleja	bagrem	celo	drvo	euforija

CSS za tabelu:

table.span {
	border: thin solid black;
	text-align: center;
	border-collapse: collapse;
	margin-left: 250px;
}

table.span th {
	background-color: silver;
}

table.span td, table.span th {
	border: thin solid black;
	padding: 5px;
}

td.palegreen {
	background-color: #98FB98;
}

colspan atribut, isto kao rowspan, ali utiče na BROJ kolona (po horizontali) koje table data/cell može da zauzima.

<table class="span">

	<tr>
		<th>A</th>
		<th>B</th>
		<th>C</th>
		<th>D</th>
		<th>E</th>
	</tr>

	<tr>
		<td>avion</td>
		<td>bazen</td>
		<td>centar</td>
		<td>dolina</td>
		<td>evolucija</td>
	</tr>

	<tr>
		<td>asketa</td>
		<td>belo</td>
		<td rowspan="2">cisterna</td>
		<td>dan</td>
		<td>ekser</td>
	</tr>

	<tr>
		<td colspan="2" class="palegreen">ISPOD asketa & belo</td>
		<td colspan="2" class="palegreen">ISPOD dan & ekser</td>
	</tr>

	<tr>
		<td>aleja</td>
		<td>bagrem</td>
		<td>celo</td>
		<td>drvo</td>
		<td>euforija</td>
	</tr>

</table>

A	B	C	D	E
avion	bazen	centar	dolina	evolucija
asketa	belo	cisterna	dan	ekser
ISPOD asketa & belo		cisterna	ISPOD dan & ekser
aleja	bagrem	celo	drvo	euforija

Jedan isti <td> može da ima OBA atributa, i rowspan i colspan.

Tabela u tabeli:

Tabele mogu da idu u tabele.

<table class="span">

	<tr>
		<th>A</th>
		<th>B</th>
		<th>C</th>
		<th>D</th>
		<th>E</th>
	</tr>

	<tr>
		<td>
			<table>
				<tr>
					<td class="palegreen">avion</td>
					<td class="palegreen">agencija</td>
				</tr>
				<tr>
					<td class="palegreen">alarm</td>
					<td class="palegreen">aparat</td>
				</tr>
			</table>
		</td>
		<td>bazen</td>
		<td>centar</td>
		<td>dolina</td>
		<td>evolucija</td>
	</tr>

	<tr>
		<td>asketa</td>
		<td>belo</td>
		<td>
			<table>
				<tr>
					<td class="palegreen">cisterna</td>
					<td class="palegreen">cigla</td>
				</tr>
				<tr>
					<td class="palegreen">cokula</td>
					<td class="palegreen">cura</td>
				</tr>
			</table>
		</td>
		<td>dan</td>
		<td>ekser</td>
	</tr>

	<tr>
		<td>aleja</td>
		<td>bagrem</td>
		<td>celo</td>
		<td>drvo</td>
		<td>
			<table>
				<tr>
					<td class="palegreen">euforija</td>
					<td class="palegreen">elaborat</td>
				</tr>
				<tr>
					<td class="palegreen">esej</td>
					<td class="palegreen">etar</td>
				</tr>
			</table>
		</td>
	</tr>

</table>

avion	agencija
alarm	aparat

bazen

centar

dolina

evolucija

asketa

belo

cisterna	cigla
cokula	cura

dan

ekser

aleja

bagrem

celo

drvo

euforija	elaborat
esej	etar

Stil liste:

list-style-type, menja izgled bullets-a tj. markera u listi. Vrednosti: disc (osnovna), circle, square, none (uklanja marker). Za <ol> ima gomila raznih.
list-style-image, omogućava postavljanje željene slike umesto standardnih markera liste.
```
ul#strawhat {
	list-style-image: url(images/StrawHat.ico);
}
```
list-style-position, određuje da li su markeri izvan ili unutar flow-a sadržaja (outside je default, inside). Lakše je prikazati nego objasniti.