Tabelat janë gjithashtu tepër të rëndësishme kur dizajnojmë uebfaqe moderne. Ka shumë gjasa që do të dëshirojmë të përdorim tabela gjatë dizajnimit të uebfaqes. Tabelat kanë dy rreshta kryesorë:

• header – shënohet <th>

  • Këtu mund të shënohet emri i kolonave

• data – shënohet <td>

  • Informatat e rreshtave janë të vendosura këtu

Duhet të mbajmë mend se tabela ka disa elemente kryesore, ajo hapet me <table>, pastaj ka <tr> për rreshtin e parë ku e vendosim <th> për të shënuar emrin e kolonës. Vazhdojmë me një tjetër <tr> ku vendosim <td> që shfaqë rreshtin e parë me informata. Rreshtat e tjerë do të vazhdojnë me <tr> dhe <td> aq sa dëshirojmë ne të shënojmë. Fotoja më poshtë e sqaron më mirë këtë hierarki:

Mund të përdorim më tepër stile për të dizajnuar tabelën, si psh:

• vertical-align: bottom

  • Pozicionon tekstin në mes por sipas pozicionit vertikal

• text-align: center;

  • Pozicionon tekstin në mes por sipas pozicionit horizontal

• padding: 15px;

  • Jep padding për 15px rreth rreshtit të caktuar

• border-bottom: 1px solid #ddd;

  • Vendos një vijë në kufirin e poshtëm të rreshtit apo tabelës

• tr:hover { background-color: #f5f5f5 }

  • Nëse afrojmë shenjën e miut atëherë ndryshon ngjyra e prapavijës

• caption-side: bottom;

  • Mund të vendosim legjendën e tabelës poshtë, lartë, majtas apo djathtas tabelës

• table-layout: fixed;

  • Mban një madhësi fikse të formatit të tabelës pamvarësisht nga madhësia e informatave në rreshta

• empty-cells: hide;

  • Me këtë mund ti shfaqim apo ti fshehim qelitë e zbrazura nëpër tabelë

Fotografitë bëjnë dallimin më të madh gjatë dizajnimit të një uebfaqeje. Ato i japin një pamje tepër të bukur dhe mund të thuhet se të gjitha uebfaqet moderne përdorin ndonjë lloj të fotografive. Gjatë ndërtimit të uebfaqes ne do të kemi edhe pjesën e galerisë ku do të vendosim fotografitë e temës sonë të cilat do të ndryshojnë dizajnin sipas fotos në vijim. Gjithashtu do të japim një stil që do të ndryshojë madhësinë e fotografive në momentin që dikush do të ofrojë shenjën e miut mbi atë fotografi.

Format janë të dobishme për të ju mundësuar përdoruesve apo vizitorëve të komunikojnë me ne duke na shënuar ndonjë mesazh. Format mund të kenë shumë funksionalitete dhe është e rëndësishme të kuptojmë se si funksionojnë ato. Në fillim kemi <form>, pastaj kemi <label> që sqaron se çfarë duhet të shënojë përdoruesi, pastaj kemi <input> ku përdoruesi mund të shënojë mesazhin. Mesazhi që dërgohet nga shfletuesi përcillet në një faqe tjetër që bën përpunimin e mesazhit dhe ruajtjen e tij.

Mesazhi mund të jetë në forma të ndryshme si:

• Text

• Number

• Email

• Password

• Submit

• Radio

• Checkbox

• Button

• Color