Kako umetnuti fotografiju u html tablicu. Gotovo standardni način rada

Tablice su jedan od najvažnijih, ali složenih elemenata koji moraju biti prisutni na web stranicama. Uz njihovu pomoć, prikladno je predstaviti važne i korisne informacije u prilično sažetom obliku. Naravno, većina urednika u predlošcima koji rade na različitim motorima omogućuju vam da automatski umetnete tablicu na stranicu web-mjesta ili zasebnu publikaciju, ali što ako se dizajn web-resursa, njegove stranice stvaraju od nule? Tada se čarobnjak početnik može suočiti s problemom: kako to učiniti. Hajdemo shvatiti kako ispravno i brzo stvoriti ovaj element.

Odabir urednika

Prije svega, počevši stvarati tablicu, trebali biste odlučiti o uređivaču u kojem ćete raditi. Naravno, najlakši način je odabrati program u kojem kreirate glavni kod web-mjesta. Ali najbolje je koristiti dobru staru bilježnicu za ove svrhe.

Možete se pitati zašto si komplicirati život, jer ako sve radite odjednom u editoru, onda se i rezultat može vidjeti odmah, a možete koristiti i programske savjete.

Da, to je točno, ali stvaranjem tablice od nule, ne samo da ćete moći temeljito proučiti sam princip njezine izrade, već i spriječiti dosadne tipkarske pogreške i pogreške u glavnom kodu. Ponekad se dogodi da se kursor slučajno pomakne prema dolje, a u procesu pisanja u kod se uvuče greška koju je ponekad teško pronaći. Nakon što izradite tablicu u bilježnici, možete kopirati njenu šifru i zalijepiti je gdje god želite.

Algoritam za izradu tablice

Prvo, sastavimo kratki algoritam kako napraviti tablicu u HTML-u. To je tako da razumijete redoslijed svakog koraka. Zatim ćemo analizirati kako točno izvršiti svaku od točaka.

Počnimo s pripremnim koracima.

1. Nacrtajte shematski prikaz tablice na listu papira.

2. Brojimo broj linija i ćelija. Ako je broj potonjih različit, računamo za svaki red posebno.

3. Odredite broj ćelija zaglavlja u retku (na primjer, ćelije "Br", "Naziv" itd.).

4. Zapišite glavne parametre tablice - boju, visinu i širinu, poravnanje teksta - općenito, što god mislite da je potrebno.

1. Umetnite oznake tablice.

2. Umetnite oznake reda na temelju broja koji vam je potreban.

3. U retke umetnite oznake ćelija (pravilne i velike), također na temelju broja koji je napisan na vašem papiru.

4. Postavite parametre za tablicu kao cjelinu.

5. Ako je potrebno, postavite indikatore za pojedinačne ćelije.

6. Svoje ćelije ispunjavamo tekstom.

Napravite tablicu

Dakle, odabrali ste uređivač, sada ćemo shvatiti kako stvoriti tablicu u HTML-u. Oznaka s kojom je tablica umetnuta u kod stranice (

), je uparen, odnosno naša konstrukcija počinje ovom oznakom, a završava s.

Nakon što smo umetnuli oznake tablice, nastavljamo s stvaranjem redaka i ćelija.

Odmah napominjemo da su ovi elementi također upareni. Označiti specificira nizove, i - Stanice.

Za ćelije zaglavlja upotrijebite upareni element .

Kao što je već spomenuto, prvi korak je nacrtati linije, a zatim upisati ćelije u njih. Kako ne biste bili zabuni, savjetujemo vam da uvučete jedan ili dva retka između svakog bloka ili napišete novi blok elemenata pomoću tipke "Tab".

Kako bi to moglo izgledati? ovako:

• ;
  ;
  ;
  ;
  ;
  ;
  ;
  ;

  P / p br.	Prezime
  1	;	Ivanov

  .

Kao što vidite, u tome nema ništa komplicirano. Glavna stvar je da se ne zbunite u broju linija i ćelija. Inače se stol može iskriviti.

Razgovarali smo o stvaranju tablice u HTML-u, sada možemo prijeći na parametre i same matrice i njenih redaka i ćelija.

Parametri tablice

Kada je kod napisan, obratite pažnju na sljedeće točke: poravnanje u obrubama, pozadinu, tekst i tako dalje.

Parametri tablice su postavljeni u oznaci

... To uključuje:

1. Border - širina granica. Postavi kao cijeli broj. Prema zadanim postavkama, granice bilo koje tablice su nula.

2. Bordercolor - boja obruba. Može se postaviti kao heksadecimalni kod boje (# 00008B), a naziv na engleskom (DarkBlue). Zadano je uvijek siva.

3. Bgcolor - Također se postavlja kodom ili imenom.

4. Poravnaj - poravnavanje teksta iza tablice. Zadana vrijednost je lijevo poravnata. Za ovaj parametar postoje sljedeće opcije:

• lijevo - omotajte se udesno;
• desno -omatanje lijevo;
• centar - prikazuje tablicu u sredini bez omatanja.

5. Širina i visina - širina i visina stola. Može se postaviti iu pikselima i kao postotak (u odnosu na veličinu prozora preglednika).

Propisivanjem ovog ili onog pokazatelja, posebnu pažnju treba obratiti na dizajn. Parametar mora biti praćen znakom "jednako", nakon čega slijedi navedena vrijednost u navodnicima.

Što se tiče boje teksta, ona je stilizirana na isti način kao i normalni tekst u HTML formatu.

Primjer dizajna stola:

;

;

;

;

;

;

;

;

P / p br.	Prezime
1	;	Ivanov

.

Parametri niza

Dakle, već smo shvatili kako napraviti tablicu u HTML-u i registrirati njegove glavne parametre. Ali što ako trebamo istaknuti red? Treba li ga stilizirati drugačije od glavnog teksta tablice?

Parametri niza su upisani u oznaku potpuno isti kao podaci tablice. Za niz se mogu postaviti sljedeće varijable:

1. Border, bordercolor i bgcolor vam već poznati.

2. Align - poravnavanje teksta u retku. Može biti lijevo, središnje i desno.

3. Valign - ova oznaka poravnava tekst okomito. Uzima sljedeće vrijednosti:

• vrh - tekst je poravnat s gornjim rubom;
• sredina - u sredini;
• dno - uz donju granicu.

Primjer oblikovanja retka:

• ;
• P / p br.;
• Prezime;
• .

Parametri ćelije

I posljednja stvar na koju vrijedi obratiti pažnju za one koji žele znati kako napraviti tablicu u HTML-u su parametri pojedinačnih ćelija, normalnih i velikih slova. Uglavnom, sve se radi na isti način kao za tablicu ili red. Jedina stvar je da se dodaju još dva važna elementa:

1. Colspan - ovaj parametar određuje broj stupaca koje ćelija može obuhvatiti.

2. Raspon redaka - već označava broj redaka koje ova ćelija zauzima.

Budući da se dizajn ne razlikuje od pisanja retka, nećemo davati primjer koda.

zaključke

Izrada stola nije tako teška kao što se čini na prvi pogled. Glavna stvar pri pisanju njezinog koda je ustrajnost i pažnja.

Što se tiče načina umetanja tablice u HTML, samo trebate kopirati i zalijepiti njenu šifru točno na mjesto svoje stranice gdje mislite da bi se trebala nalaziti.

Slobodno eksperimentirajte i uskoro ćete savladati tehniku ​​izrade stolova do savršenstva. Sretno!

Zadatak

Napravite tablicu i odredite njezine parametre (margine i udaljenost između ćelija) kroz stilove.

Riješenje

Tablica se sastoji od redaka i stupaca ćelija koje mogu sadržavati tekst i slike. Za dodavanje tablice na web stranicu, koristite oznaku

... Ovaj element služi kao spremnik za elemente koji definiraju sadržaj tablice. Bilo koja tablica sastoji se od redaka i ćelija, koje se u skladu s tim postavljaju pomoću oznaka i iznutra

... Tablica mora sadržavati barem jednu ćeliju (primjer 1). Dopušteno umjesto oznake	koristiti oznaku	... Tekst u ćeliji ukrašen oznakom	, koje preglednik prikazuje podebljano i poravnato sa središtem ćelije. Inače, razlike između ćelija stvorene su pomoću oznaka	i	Ne. Primjer 1. Izrada tablice HTML5 IE Cr Op Sa Fx Ćelija 1 Ćelija 2 Ćelija 3 Ćelija 4 Redoslijed stanica i njihov izgled prikazani su na Sl. jedan. Riža. 1. Rezultat kreiranja tablice s četiri ćelije Atribut granice oznake dopušteno je dodavanje samo s praznom vrijednošću ( ) ili jednako 1. Sve ostale vrijednosti nisu potvrđene. Svojstvo stila paddinga koristi se za kontrolu margina unutar ćelija, koje se dodaje selektoru td. Razmak između ćelija mijenja svojstvo razmaka obruba (primjer 2) dodano selektoru tablice, IE preglednik ga razumije tek od verzije 8.0. Primjer 2. Polja unutar ćelija HTML5 CSS 2.1 IE Cr Op Sa Fx Naslov 1 Naslov 2 Ćelija 3 Ćelija 4 Tablica s poljima i razmacima između ćelija prikazana je na Sl. 2. Sličan rezultat može se postići bijelim rubom oko stanica. Riža. 2. Polja u ćelijama tablice Pozdrav dragi čitatelji bloga! Često na web stranicama, osim teksta i slika, postaje potrebno prikazati različite podatke u obliku tablica. Da, to je razumljivo, tablica je najprikladniji način za predstavljanje velike količine informacija. Stoga se postavlja pitanje "Kako umetnuti tablice u html?"... U ovom članku ću vam odgovoriti na ovo pitanje i dati vam mnogo primjera raznih html tablica. Kako napraviti tablicu koristeći HTML HTML tablice se izrađuju u četiri koraka. 1. U prvom koraku u html-kodu pomoću uparene označiti reci pregledniku da je tablica umetnuta u web stranicu: ... Element tablice je element web stranice na razini bloka. Stoga se tablica uvijek prikazuje u novom retku, okomito uvučena od susjednih elemenata, pa je nema potrebe stavljati u odlomak. 2. U drugom koraku formiramo žice tablice postavljanjem uparenih oznaka

... Svaki element stvara zasebnu liniju:

3. Nadalje, u trećem koraku, formiramo stanica tablice koje koriste uparene oznake i koji se uklapaju unutar elementa ... Označiti stvara uobičajeno stanica, i stanica naslov, tj. zaglavlje odgovarajuće kolone:

4. Pa, u zadnjem koraku postavljamo unutar elemenata i sadržaj stanica. HTML kod za umetanje tablice u web stranicu izgleda otprilike ovako:

1. stupac	2. stupac	3. stupac
Ćelija 1-1	Ćelija 1-2	Ćelija 1-3
Ćelija 2-1	Ćelija 2-2	Ćelija 2-3

Pomoći će vam da fino podesite prikaz obruba. Pomoću možete promijeniti debljinu i boju okvira, te promijeniti vrstu obruba.

Tekst koji treba staviti unutar ćelija nije obavezan, ali ako je tekst velik, možete ga razbiti na odlomke pomoću oznake

Ako trebate nekako ukrasiti umetnuti tekst, možete ga koristiti.

Osim teksta, možemo postaviti slike u ćelije pomoću oznake :

Druga tablica može čak djelovati i kao sadržaj ćelije. U ovom slučaju, stvaranje ugniježđene tablice ne razlikuje se od stvaranja obične tablice. Samo između oznaka i umetnute oznake

i, a u njega se ubacuju reci i ćelije.

Prilikom izrade tablica morate imati na umu neka pravila:

• samo se oznaka koristi za izradu tablice ;
  označiti
  može biti samo unutar oznake ;
  oznake
  , bilo koji drugi sadržaj oznake ignoriran od strane preglednika;
  sadržaj tablice (tekst ili slike) može biti samo u oznakama

  , što tablici daje naslov. Tekst naslova nalazi se unutar ove oznake, a to mora biti unutar oznake ... I nije važno gdje se oznaka nalazi u html kodu tablice ... Štoviše, dopušteno je koristiti ne više od jednog elementa. unutar jedne tablice, a trebao bi ići u html kodu odmah nakon oznake

  , preglednik će i dalje prikazati naslov iznad tablice i centrirati ga. Ali obično oznaka

  postavljeno odmah nakon uvodne oznake :

  Ovo je stol

  Ćelija 1.1	Ćelija 1.2
Ćelija 2.1	Ćelija 2.2

  Prikaz:

  Odjeljci tablice

  html tablicu možemo logično podijeliti na dijelove – odjeljke. Ukupno postoje tri vrste sekcija:

  • odjeljak zaglavlja, u koji su smještene ćelije zaglavlja koje čine zaglavlje tablice;
  • odjeljak tijela, u kojem se nalaze ćelije s osnovnim podacima;
  • odjeljak za završetak, u koje su smještene ćelije sa zbrojevima.

  Odjeljak zaglavlja tablice formira se pomoću oznake para

  .

  Dio tijela kreiran je pomoću uparene oznake

  ... Jedna html tablica može sadržavati nekoliko dijelova tijela, što vam omogućuje stvaranje strukturnih blokova na koje se mogu primijeniti ujednačeni stilovi dizajna.

  Odjeljak dovršetka formiran je uparenom oznakom

  i unutar jednog spremnika može biti samo jedan.

  Sve ove uparene oznake moraju sadržavati oznake

  koji formiraju linije povezane s odgovarajućim odjeljcima:

  1. stupac	2. stupac	3. stupac
Ćelija 1.1	Ćelija 1.2	Ćelija 1.3
Ćelija 2.1	Ćelija 2.2	Ćelija 2.3
Ishod 1	Ishod 2	Ishod 3

  Spojite ćelije tablice

  Ostaje reći o najvažnijoj osobini tablica - spajanje stanica. Atributi se koriste za kombiniranje više ćelija u jednu kolspan i raspon redova oznake

  i	može biti samo unutar oznake
  i	; ćelije tablice moraju imati barem dio sadržaja, inače ih preglednik možda uopće neće prikazati, ali ako neka ćelija mora biti prazna, tada se u nju obično stavlja neprekidni razmak (HTML literal); tablica se odnosi na blok elemente web stranice; veličine tablice i njenih ćelija ovise o sadržaju, t.j. stol je razvučen u širinu i visinu tako da sve stane; napravljena je mala uvlaka između granica pojedinih ćelija i između granice svake ćelije i njenog sadržaja; tekst u ćelijama zaglavlja (ti element) prikazan je podebljano i centriran; granice oko tablice i njene ćelije nisu iscrtane prema zadanim postavkama. Zaglavlje tablice Počnimo s uparenom oznakom
  i	... Atribut colspan određuje broj ćelija koje se spajaju vodoravno, a raspon redaka je okomit: 1.1 1.2-1.3 2.1 2.2 2.3 3.1-4.1 3.2 3.3 4.2 4.3 Primjer rezultata: 1.1 1.2-1.3 2.1 2.2 2.3 3.1-4.1 3.2 3.3 4.2 4.3 Prilikom spajanja ćelija važno je provjeriti broj ćelija u svakom retku kako ne bi bilo grešaka. Dakle, konstrukcija	zamjenjuje dvije ćelije, tako da bi u sljedećem retku trebale biti dvije oznake		, ili ista konstrukcija! Ako se broj ćelija u svim recima ne podudara, pojavit će se prazne dodatne ćelije. Primjer pogrešnog html koda pri spajanju ćelija: ćelija 1.1 ćelija 1.2 ćelija 2.1 ćelija 2.2 I rezultat prikaza u pregledniku: Oni. ako analizirate html-kod, primijetit ćete da prvi redak sadrži tri ćelije, od kojih su dvije kombinirane pomoću atributa colspan, a drugi redak sadrži samo dvije ćelije. Stoga se u drugom retku pojavljuje treća prazna ćelija. Atributi oznake U ovom postu smo već naišli na jedan atribut oznake ... S atributom obruba koji postavlja širinu obruba u pikselima. Prema zadanim postavkama, to je 0 i stoga se ćelije prema zadanim postavkama prikazuju bez obruba. Osim atributa granice, postoji nekoliko drugih važnih atributa koje ta oznaka podržava. ... Pogledajmo ih. Atribut uskladiti- setovi poravnanje tablice po stranici. Može uzeti vrijednosti lijevo, središte, desno, koje postavljaju poravnanje lijevo, središte i desno. Zadana vrijednost je ostavljena. Atribut pozadini, što je postavlja pozadinsku sliku do stola. Kao vrijednost uzima se adresa datoteke sa slikom. bgcolor- setovi boja pozadine tablice. Može se koristiti zajedno s atributom pozadine. Atribut bordercolor pita boja okvira tablice. Cellpadding- definira udaljenost između granice ćelije i njenog sadržaja... Poboljšava čitljivost tablice. Vrijednost može biti bilo koji pozitivan broj. Razmak stanica- setovi udaljenost između vanjskih granica stanica. O ovom razgovoru o kako umetnuti tablicu u html stranicu Završit ću, samo da rezimiram: oznake se koriste za umetanje tablice - oznaka tablice, - dodavanje retka i , odjeljak za završetak i dio tijela - ; za kombiniranje ćelija upotrijebite atribute oznake Ovdje klasa linija specificira dimenzije ćelije. HTML tablice rasporediti i prikazati podatke pomoću redaka ili stupaca. Tablice se sastoje od ćelija formiranih presjekom redaka i stupaca. Ćelije tablice može sadržavati sve HTML elemente kao što su zaglavlja, popisi, tekst, slike, elementi obrasca i druge tablice. Za svaku tablicu možete dodati pripadajući naslov tako da ga postavite prije ili iza tablice. Tablice se više ne koriste za izgled web stranica i raspored pojedinih elemenata, jer takva tehnika ne osigurava fleksibilnost strukture i responzivnost stranice, značajno povećavajući HTML oznaku. Svi elementi tablice su dostupni kao i njihovi vlastiti atributi. Izrada tablica u HTML-u Sadržaj: 1. Kako napraviti tablicu Tablica se kreira pomoću oznake para Sl. 1. Izgled tablice bez formatiranja css svojstava Prema zadanim postavkama, tablica i ćelije nemaju vidljive granice. Granice postaviti pomoću svojstva granice: / * vanjski obrubi sive tablice debljine 1px * / tablica (rub: 1px čvrsta siva;) / * obrubi ćelija prvog retka tablice * / th (obrub: 1px čvrsta siva;) / * obrubi ćelija tijela tablice * / td (obrub: 1px čvrsta siva;) Razmak između ćelija tablice uklonjeno pomoću svojstva tablice (border-collapse: collapse;). Širina tablica je prema zadanim postavkama jednaka širini njezinog unutarnjeg sadržaja. Da biste postavili širinu, morate postaviti vrijednost za svojstvo širine: / * će učiniti širinu tablice jednakom širini bloka spremnika u kojem se nalazi * / tablica (širina: 100%;) / * će postaviti fiksnu širinu za tablicu * / tablicu (širina: 600px;) Ako su za ćelije tablice specificirani padding i obrubi, tada će širina tablice uključivati ​​sljedeće vrijednosti: padding-lijevo i padding-desno, širina obruba lijevo plus širina obruba desno zadnje ćelije u retku. Ako su širina i obrubi ćelija specificirani, tada će širina tablice biti zbroj širine ćelija plus širina obruba lijevo i širine obruba desno zadnje ćelije u retku . 2. Kako kreirati retke (redove) tablice Redovi ili redovi tablice kreiraju se pomoću oznake ... Broj vodoravnih redaka u tablici određen je brojem uparenih oznaka . 3. Kako napraviti ćeliju zaglavlja stupca tablice 4. Kako napraviti ćeliju tijela tablice koji se nalaze u istom redu određuju broj ćelija u retku tablice. Broj parova stanica i za označavanje svakog dijela tablice. Element se mora koristiti sljedećim redoslijedom: kao dijete - umetanje ćelije; tablica je blok element web stranice; sadržaj ćelija može biti ne samo tekst, već i slike i druge tablice; tablica može sadržavati tri vrste odjeljaka: odjeljak zaglavlja - colspan i rowspan. To je sve, u sljedećem postu govorit ću o alatima za navigaciju na html stranici. Kako ne biste propustili ovaj post, pretplatite se na ažuriranja mog bloga! Sve, vidimo se uskoro! Ovaj način rada temelji se na standardnom načinu rada s nekim iznimkama: prikaz slika unutar ćelija tablice i slika jedna ispod druge odvija se kao u načinu kompatibilnosti. Jedan od sljedećih tipova dokumenata koristi se za prelazak na gotovo standardni način rada. Za okvire u HTML-u: Za okvire u XHTML-u: Slike jedna ispod druge Prilikom vertikalnog prikaza slika s pomicanjem linije slike u gotovo standardnom načinu prikazuju se zajedno bez praznina. Primjer 1.2 prikazuje kod za prikaz dvije slike. Primjer 1.2. Izlaz dvije slike HTML 4.01 IE Cr Op Sa Fx Budući da su figure prethodno bile jedna i "izrezane" radi praktičnosti, one čine jednu sliku (slika 1.1). Riža. 1.1. Prikaz slika u gotovo standardnom načinu rada U standardnom načinu rada stvara se mali razmak između slika (slika 1.2). Riža. 1.2. Prikaz slika u standardnom načinu rada Postoje dva glavna načina za zaobilaženje ove značajke u standardnom načinu rada: dodati prikaz: blok za slike; koristite svojstvo visine reda na roditeljskom spremniku. Razmotrimo ove metode detaljnije. Pretvaranje oznake Blok element će nam više puta pomoći da zaobiđemo razne probleme povezane sa slikama. Ovaj put ćemo koristiti značajku da se blok elementi poravnavaju jedan ispod drugog (uvlake se ne uzimaju u obzir). U ovom slučaju, oznaka iz koda, naravno, treba ukloniti (primjer 1.3). Primjer 1.3. Korištenje svojstva bloka Nije potrebno koristiti svojstvo prikaza, možete koristiti i line-height, ovo svojstvo postavlja razmak između redaka. Postavljanjem vrijednosti od 1px za oznaku Unutar kojih se nalaze slike, dobit ćemo sličan rezultat (primjer 1.4). Primjer 1.4. Korištenje svojstva line-height XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Slike u tablici Dodavanje slike u ćeliju tablice također pokazuje razliku između načina rada preglednika. Radi razumijevanja, analizirajmo sljedeći kod (primjer 1.5). Kako bi obrub oko tablice bio vidljiv, svojstvo obruba dodano je selektoru TABLE u stilovima. Primjer 1.5. Slika u tablici HTML 4.01 CSS 2.1 IE Cr Op Sa Fx Rezultat ovog primjera prikazan je na sl. 1.3a. Za standardni način rada, izlaz slike je malo drugačiji (slika 1.3b). a b Riža. 1.3. Slika u tablici. a - gotovo standardni način rada, b - standardni način rada Primjetno je da se u standardnom načinu rada pojavljuje mala uvlaka na dnu slike. odakle dolazi? Ako u ćeliju dodate tekst i povećate ljestvicu (slika 1.4), tada je jasno vidljivo da je slika kao umetnuti element poravnata s osnovnom crtom teksta, a ne s njegovim donjim rubom. Sukladno tome, razlika između osnovne linije i donjeg ruba teksta je vrijednost praznine ispod slike. Riža. 1.4. Osnovna linija teksta Opet, postoji nekoliko načina za promjenu ponašanja slika u tablici. Prvi način je već spomenut, to je transformacija oznake u blok element koristeći svojstvo prikaza postavljeno na blok (vidi primjer 1.3). Stil u ovom slučaju bit će sljedeći: TABLE IMG (prikaz: blok;) Ako u ćeliji postoji tekst uz slike, ovaj stil može dovesti do neželjenih posljedica. Umjesto da se slika postavlja uz tekst, pojavljuje se kao blok element u novom retku. U tom slučaju, preporuča se postaviti poravnavanje slika prema donjem rubu pomoću svojstva vertikalno poravnavanje s donjom vrijednosti (primjer 1.6). Primjer 1.6. Poravnavanje slika XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Tekst Iako svi preglednici u ovom primjeru pokazuju donje poravnanje slike, poravnanje samog teksta je malo drugačije. Preglednici Firefox, Safari, IE7 poravnavaju tekst na dnu slike, a Opera, IE8, IE9 - na vrh. Crteži u jednom pikselu U danima tabelarnog izgleda aktivno se koristila prozirna slika veličine jedan po jedan piksel, takozvani crtež od jednog piksela. Smještena u ćeliju tablice, takva slika nije joj dopuštala da se smanji do određenih granica, već se sama lako skalirala, postavljajući tako širinu ili visinu ćelije. Budući da je slika prozirna, možete postaviti boju pozadine za ćeliju i dobiti vodoravne ili okomite linije određene debljine. U standardnom načinu rada susrećemo se s istim problemima kao i kada koristimo obične crteže unutar ćelija. Visina ćelije će se proširiti kako slike budu podstavljene od dna. Ovaj se problem rješava mnogo lakše i ne zahtijeva korištenje dodatnog stila. Moderni preglednici savršeno prikazuju zadane veličine ćelija bez dodatnih slika unutra. Stoga je dovoljno jednostavno ukloniti sliku od jednog piksela iz ćelije. stvara naslov stupca - posebnu ćeliju, tekst u kojoj je istaknut podebljanim slovima. Broj ćelija zaglavlja određen je brojem parova oznaka stvara ćelije tablice, unutar kojih se postavljaju podaci tablice. Uparene oznake mora biti jednak broju parova stanica ... Za element su dostupni atributi colspan, rowspan, headers. 5. Kako dodati naslov (naslov) u tablicu Stvara potpis tablice. Dodano odmah nakon oznake 6. Grupiranje redaka i stupaca tablice Stvara strukturnu grupu stupaca isticanjem logički ujednačenih ćelija. Grupira jedan ili više stupaca radi dosljednog oblikovanja, što vam omogućuje stiliziranje stupaca umjesto ponavljanja stilova za svaku ćeliju i za svaki redak. Dodano odmah nakon oznaka Riža. 2. Isticanje stupaca tablice drugom bojom pomoću oznaka i 7. Grupiranje odjeljaka tablice Element stvara grupu naslova za retke tablice kako bi se postavio ujednačen izgled. Koristi se u kombinaciji s elementima , poslije i, i prije , i elementi. Može se koristiti jednom unutar jedne tablice.grupira glavni sadržaj tablice. Koristi se u kombinaciji s elementima i . Stvara grupu redaka koja predstavlja informacije o iznosima ili zbrojima, koja se nalazi na dnu tablice. Jednom korišteno u tablici. Stavlja se iza oznake, prije oznaka i . Ovo grupiranje redaka postavljeno je u standardu u očekivanju da će preglednici, prilikom prikazivanja dugih tablica, osigurati da se redci podataka pomiču, a da glavni dio i podnaslov ostanu nepomični, a kada se izlaze na pisač, moći će koristiti gornji dio i podnaslov kao zaglavlja stranice. Međutim, moderni preglednici to ne rade i jednostavno prikazuju i kao retke podataka ili, u najboljem slučaju, jednostavno stavljaju odgovarajuće retke na početak i kraj tablice. 8. Kako kombinirati ćelije tablice Atributi colspan i rowspan kombiniraju ćelije tablice. Atribut colspan određuje broj ćelija spojenih vodoravno i rowspan okomito. Riža. 3. Primjer vodoravnog kombiniranja ćelija tablice pomoću atributa colspan 9. Atributi elemenata tablice Tablica 1. Atributi elemenata tablice Prihvaćene vrijednosti: popis naziva ćelija, odvojenih razmacima; ova imena moraju biti dodijeljena ćelijama putem njihovog id atributa. Prihvaćene vrijednosti: bilo koji pozitivan cijeli broj. Atribut Opis, prihvaćena vrijednost kolspan Broj ćelija po retku za vodoravno kombiniranje. zaglavlja Određuje popis ćelija zaglavlja koje sadrže informacije zaglavlja za trenutnu podatkovnu ćeliju. Dizajniran za preglednike govora. ... ... raspon redova Broj ćelija u stupcu koje će se okomito spojiti. Moguće vrijednosti: broj od 1 do 999. raspona Zadani broj stupaca koji se kombiniraju za stvaranje jednog stila je 1. 10. Primjer izrade tablice Riža. 4. Izrada jelovnika restorana pomoću HTML tablice HTML oznaka Jelovnik restorana "Romashka" Kuhinja Hladna jela Topla jela deserti salate Grickalice Prvi obrok Drugi tečajevi ruski Vinaigrette Jezik od hrena Juha od kupusa s kiselim kupusom Okruglice od krumpira Pečene jabuke s medom Olivier salata Žele od govedine Domaća kisela krastavac Karasi pečeni u kiselom vrhnju Kolač od palačinki Haringa ispod "krznenog kaputa" Želeran smuđ Mesna mljavica Pozharskie kotleti Kolač "Krompir" španjolski Ceviche od kapice Empanadas Krušna juha od češnjaka Paella s plodovima mora Churros Timbal od avokada i tune Ahotomate asturijska fabada Svinjski rakso Almoishavena Grah sa šunkom Changfain Riblja juha s okruglicama od griza Tortilja od krumpira Bunuelos francuski Vosges salata Piletina Riyette Krem-juha od patlidžana "Renoir" Krumpir je ograničen Brioche Panzanella salata Ukus od sira Francuska juha od bundeve Gratin od peradi Ligurska pita od limuna Tartarus Ukiseljeni losos Konti juha Tartiflett Savarin "Trijumf"