novi problem sa tabelom?

[ fensi88 @ 28.08.2013. 21:19 ] @

Dobila sam ovu tabelu ali bih volela da ovo 1. bude ispred slike i po vertikali na sredini slike. Kako to da postignem? Ima li neko ideju sta treba da prepravim u kodu?

p
{
font-family: sans-serif;color:white;
font-size:16px;font-weight: bold;margin:0;
}

table.goca
{
border:2px solid white;width:510px;
font-family: sans-serif;
margin:auto;
border-width: 2px;
border-color: white;
border-collapse: collapse;
margin-top:20px;
margin-bottom:25px;
text-align:center;}

table.goca th
{
border-width: 1px;
padding: 1px;
border-style: solid;
border-color: white;
background-color: #00ff80; font-color:green;
}

table.goca td
{
border-width: 1px;
padding: 2px;
border-style: solid;
border-color:white;
background-color:green;
color:white;text-align:center;
}
.img4
{
vertical-align:middle;
margin-top:0px;
margin-bottom:1px;
}

.....................
<table class="goca">
<tr>
<td style='width:100px'>No.</td>
<td style='width: 160px'>Horse</td>
<td style='width: 60px'>Age</td>
<td style='width: 60px'>Wgt</td>
<td style='width: 130px'>Jockey</td>
</tr>

<tr>
<td>1.<img class="img4" src="primus.gif" width="40" height="29"

/></td>
<td>Primus Inter Pares
b g</td>
<td>7</td>
<td>11-12</td>
<td>W. Renwick</td>
</tr>
<tr>
<td>2. <img class="img4" src="quest.gif" width="40" height="29"

/></td>
<td>Northern Quest

ch g</td>
<td>7</td>
<td>11-7</td>
<td>P. Kinsella</td>
</tr>
</table>

Hvala puno na odgovoru. Kad imam "obican tekst" onda slika ide po sredini sa ovim kodom, ali u tabeli nece ?!

[ deZio @ 28.08.2013. 22:53 ] @

1. Mnogo ti je neuredan kod, moraš da sve stilizuješ preko CSS-a kad već koristiš CSS.
Dakle nepotrebno ti je da imaš atribute width i height za <img> tag kad to možeš da premestiš u CSS.

2. Takođe koristi uvlačenje koda kako bi bio pregledniji.

3. Nepotrebno ti je korišćenje taga unutar <td> taga. tag ti služi za pisanje paragrafa, dakle teksta koji je dugačak. Ako hoćeš da stilizuješ tekst unutar <td>, onda stilizuj sam <td> preko CSS-a

4. nemoj da pišeš tagove velikim slovima. Dakle piši a ne iako oba rade.

5. Kad ovde postavljaš bilo kakav kod, nemoj jednostavno nalepiti kao tekst, već sav kod stavi između [code] i [/code]

6. Naziv atributa se piše atribut="vrednost" a ne atribut='vrednost'

7. Koristi tag za prelazak u novi red.

Evo kako izgleda tvoj kod kad se "dotera":

HTML

Code:

<table class="goca">
 <tr>
 <td style="width: 100px">No.</td>
 <td style="width: 160px">Horse</td>
 <td style="width: 60px">Age</td>
 <td style="width: 60px">Wgt</td>
 <td style="width: 130px">Jockey</td>
 </tr>
 <tr>
 <td class="prva-kolona">1.<img src="http://img.tradeindia.com/cata...mplate26006/send-mail-icon.jpg" /></td>
 <td>Primus Inter Pares b g</td>
 <td>7</td>
 <td>11-12</td>
 <td>W. Renwick</td>
 </tr>
 <tr>
 <td class="prva-kolona">2. <img src="http://img.tradeindia.com/cata...mplate26006/send-mail-icon.jpg" /></td>
 <td>Northern Quest ch g</td>
 <td>7</td>
 <td>11-7</td>
 <td>P. Kinsella</td>
 </tr>
</table>

CSS

Code:

body {
    background-color: #ccc;
}

table.goca {
    border: 2px solid white;
    width: 510px;
    margin: 20px auto 25px;
    border-width: 2px;
    border-color: white;
    border-collapse: collapse;
    background-color: green;
}

table.goca td {
    border: 1px solid white;
    font-family: sans-serif;
    color: white;
    font-size:16px;
    font-weight: bold;
    padding: 2px;
    text-align:center;
    vertical-align: middle;
}

table.goca td.prva-kolona {
    text-align: left;
}

table.goca td.prva-kolona img {
    width: 40px;
    height: 29px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

A evo uživo možeš testirati na ovoj adresi:
http://jsfiddle.net/dqtWw/

[ fensi88 @ 29.08.2013. 10:06 ] @

DeZio, cestitke! Mislila sam da je ovaj problem neresiv, ali za tebe izgleda nema neresivih problema, i prosli put si mi pomogao da resim drugi problem sa tabelem.
Hvala ti na ovim korisnim savetima trudicu se da ih ispostujem!
A i ovaj link sto si poslao je super! HVALA!

[ ivan.a @ 31.08.2013. 11:50 ] @

Citat:

Dakle nepotrebno ti je da imaš atribute width i height za <img> tag kad to možeš da premestiš u CSS.

Ne bih rekao da je ovo potpuno ispravno. Sve zavisi šta ti je potrebno. U tvom slučaju je potrebno definisati atribute width i height.
Visina i širina slike treba uvek biti definisana kao HTML atribut elementa, dok stilizovanje može biti opciono pokriveno preko css-a. Na taj način se najpravilnije koriste HTML elementi (za renderovanje, i za browser, i za user-agents itd).

Citat:

Naziv atributa se piše atribut="vrednost" a ne atribut='vrednost'

Ni ovo nije pravilo. Sve zavisi od tvog stila pisanja koda. Nekad možeš koristiti i oba (npr. kod javascript i elementa onclick). Dakle, nije nepravilno stavljati ' kod pisanja html elemenata (mada i ja češće koristim " - double quotes).

[ deZio @ 31.08.2013. 15:07 ] @

Slažem se, nije uopšte neispravno pisati width i height kao atribut. Sve je stvar prakse. Ja kada imam više slika, i one su iste veličine onda samo dodam css i na taj način smanjujem sam html. Još jedna prednost je kad imaš dosta slika iste veličine, i kasnije odlučiš da ne budu tih dimenzija, onda je dovoljno promeniti samo jednu naredbu u CSS-u a u suprotnom moraš menjati za svaki HTML atribut. Naravno može i automatski da se promene sve dimenzije odjednom u naprednijem text editoru, ali to je već druga priča. Slažem se da je prednost korišćenja atributa renderovanje stranice. Takođe sam zaboravio napomenuti da bi za svaki img tag obavezno trebalo koristiti i alt atribut.

Što se tiče navodnika, nije pravilo ali bih rekao da je nepisano pravilo :D A za JS nema potrebe da se piše ' jer se unutar JS " može bez problema zameniti sa '. Isto tako i za style atribut nema potrebe pisati '.

Ako se hoće ovako nešto postići:

Code:
<img style="background-image: url("urldoslike.jpg");" alt="">

jednostavno se napiše ovako:

Code:
<img style="background-image: url('urldoslike.jpg');" alt="">

[ ivan.a @ 31.08.2013. 16:56 ] @

Citat:

Slažem se, nije uopšte neispravno pisati width i height kao atribut. Sve je stvar prakse.

Neispravno je izostaviti width i height atribut (naravno to ne znači da ti se slike neće učitati ili tako nešto). Postoji više razloga za to.
Prostor koji je namenjen za sliku je definisan još dok se stranica i slike učitavaju. Bez toga browser ne zna dimenzije tj. veličinu slike i ne može rezervisati određen prostor za taj element. To može dovesti do neželjenih efekata, kao npr. da se layout menja tokom učitavanja slika sa nedefinisanim atributima (onda stranica počne da ti "skače" gore-dole dok se slike učitavaju ili se čak potpuno izmeni neki element tipa pređe sa leve strane na desnu). Ovo se obično može videti kod početnika koji izostavljaju ove atribute.
Ako radiš neki page test speed i izostaviš ove atribute sigurno će ti stojati "warning" da dimenzije nisu definisane.
Ako testiraš validnost HTML elemenata dobićeš isto upozorenje.
Pravilno je korišćenje tih atributa za originalne dimenzije slike. Nije pravilo, ali je pravilno.

Citat:

A za JS nema potrebe da se piše ' jer se unutar JS " može bez problema zameniti sa '.

Ovo mi nije jasno, niko nije spomenuo striktno korišćenje single quotes za javascript i inline style elemenata. Samo sam napisao da nije nepravilno korišćenje single quotes kod atributa.

Citat:

Ja kada imam više slika, i one su iste veličine onda samo dodam css i na taj način smanjujem sam html. Još jedna prednost je kad imaš dosta slika iste veličine, i kasnije odlučiš da ne budu tih dimenzija, onda je dovoljno promeniti samo jednu naredbu u CSS-u a u suprotnom moraš menjati za svaki HTML atribut.

Kod slika je potrebno staviti originalne dimenzije za width i height atribut, a opciono stilizovati uz pomoć css. Optimalno je korišćenje slika istih dimenzija kao što su definisane sa atributima (npr. umanjene slike).
<img src="slika.jpg" width="640" height="480" class="original" alt="slika" /> - originalna slika je dimenzija 640x480 pixela
<img src="slika_thumb.jpg" width="320" height="240" class="thumb" alt="slika" /> - ista slika samo umanjenih dimenzija 320x240

Onda možeš stilizovati originalnu i umanjenu sliku, npr. dodati okvir za umanjene slike:

Code:
.original {
border: 0;
-ms-interpolation-mode: bicubic;
}

.thumb {
border: 6px solid #ccc;
width: 320px;
height:240px;
}