~>&ˇ#

Babablogom

 

 
Beszélgessünk
 
Bejelentkezés
Felhasználónév:

Jelszó:
SúgóSúgó
Regisztráció
Elfelejtettem a jelszót
 
Eddig
Indulás: 2015-04-09
 
Kódok

Táblázatok átalakítása

2015.05.27. 15:21, Enma22

Itt igazából adottak a kódok, lehet CSS-be is beletenni, vagy csak abba a modulba, ahol éppen használni kívánod, és akkor minden egyes táblázatnak új kódot tudsz megadni.

Ha modulon belül szerkeszted, akkor a Forráskódot használhatod hozzá, nem kell külön kódnézetre váltani ezért, így azonnal látod az eredményt.

Ha készítesz egy táblázatot a szerkesztőben, és forráskódra váltasz, akkor ezt láthatod:

Ez a táblázat:

egyes kettes

Ez pedig a kódja:

<table border="1" cellpadding="1" cellspacing="1" style="width: 400px;">
<tbody>
<tr>
<td>
egyes</td>
<td>
kettes</td>
</tr>
</tbody>
</table>

 

A table maga a táblázat, a többi szöveg mellette a keretet, a cellatérközt, és igazítást, valamint a méretét adja meg.

A tbody maga a törzs, a tr a sor, a td pedig az oszlop. Egy tr-en belül több td is megadható, és ahány tr van, annyi sor lesz majd.

Valamint ahány td van egy tr alatt, annyi oszlop alakul belőle, lásd a fenti példát.

Remélem azért érthető a dolog.

Általában a td-n alakítunk, vagyis adunk neki egy class kódot.

Vagyis beírjuk a kódunkkat így:

(egyszerűbb ha a táblázatkészítővel alkotunk egyet)

szöveg
szöveg
szöveg
 
<table border="1" cellpadding="1" cellspacing="1" style="width: 400px;">
<tbody>
<tr>
<td>
szöveg</td>
</tr>
<tr>
<td>
szöveg</td>
</tr>
<tr>
<td>
szöveg</td>
</tr>
</tbody>
</table>
 
Ebben még nincs szöveg, de még átalakítás előtt nyugodtan lehet felvinni szöveget, képet a táblázatba.
 
Aztán szépen kigondoljuk, hogy mi legyen a neve az osztálynak, amit adunk neki.
 
Nálam proba most, hiszen lényegtelen igazából.
 
Tehát ilyen sorok lesznek:
 
<td class="proba">
És ide jön a szöveg</td>
 
 
Aztán a szokásos módon megalkotjuk a class kódját.
 
.proba {
}
 
Töltetnek amit akarsz, betűstílus, betűméret, háttér kép vagy szín, keret, lekerekítés, stb.
 
Pl:
 
.proba {
font-family: Tahoma;
font-size: 12pt;
color: #ededed;
border: 1px solid #000000;
border-radius: 25px;
}
 
Szemléltetem is azért: 
 
Itt a szöveg
 
 
 
Csak az első sort alakítottam át. A többinek ugyan így lehet kódokat, vagy mindnek ugyan azt. Igazából hírnek is tudod használni, ha az első sorba címet, a másodikba dátumot, nevet, a harmadikba a szöveget írod.
 
Szegélyméretnek (border), majd 0-át adjatok meg, én azért hagytam meg, hogy lássátok, tobb sorom  is van, 0 esetén ezek nem látszanak.
 
Ha nem így szeretnéd megoldani, hanem több oszlopot is tervezel, akkor az egy tr alá tartozó td-knek add ugyan azt a nevet. Vagy akár pont fordítva is csinálhatod, az első oszlopok egyformák, a másodikak megint másmilyenek. Ilyenkor minden második td-nek lesz azonos neve.
 
Ha nem érthető szívesen segítek benne.

Szólj hozzá te is!
Név:
E-mail cím:
Amennyiben megadod az email-címedet, az elérhető lesz az oldalon a hozzászólásodnál.
Hozzászólás:
Azért, hogy ellenőrízhessük a hozzászólások valódiságát, kérjük írd be az alábbi képen látható szót. Ha nem tudod elolvasni, a frissítés ikonra kattintva kérhetsz másik képet.
Írd be a fenti szót: új CAPTCHA kérése
 
Még nincs hozzászólás.
 
Friss
Friss bejegyzések
2015.06.10. 11:16
2015.06.09. 18:03
2015.06.09. 17:53
2015.06.09. 13:30
2015.06.09. 12:46
2015.05.27. 15:21
2015.05.19. 16:37
2015.05.19. 15:39
2015.05.19. 15:33
2015.05.13. 10:40
Friss hozzászólások
 

Dryvit, hõszigetelés! Vállaljuk családi házak, nyaralók és egyéb épületek homlokzati szigetelését! 0630/583-3168 Hívjon!    *****    A legfrissebb hírek a Super Mario világából és a legteljesebb adatbázis a Mario játékokról.Folyamatosan bõvülõ tartalom.    *****    Gigágá! Márton napján is gyertek a Mesetárba! Nemcsak libát, de kacsát is kaptok! Játsszatok velünk!    *****    A Nintendo a Nintendo Music-kal megint valami kiváló dolgot hozott létre! Alaposan nagyító alá vettem, az eredmény itt.    *****    Leanderek, Parfümök, Olajok, és Szépségápolási termékek! Használd a LEVI10 kupont és kapj 10% kedvezményt!Megnyitottunk    *****    Megjelent a Nintendo saját gyártású órája, a Nintendo Sound Clock Alarmo! Ha kíváncsi vagy, mit tud, itt olvashatsz róla    *****    Megnyílt a webáruházunk! Parfümök, Szépségápolási termékek, Olajok mind egy helyen! Nyitási akciók, siess mert limitált!    *****    Az általam legjobbnak vélt sportanimék listája itt olvasható. Top 10 Sportanime az Anime Odyssey-n!    *****    Pont ITT Pont MOST! Pont NEKED! Már fejlesztés alatt is szebbnél szebb képek! Ha gondolod gyere less be!    *****    Megnyílt a webáruházunk! NYITÁSI AKCIÓK! Tusfürdõ+Fogkrém+Sampon+Izzadásgátló+multifunkcionális balzsam most csak 4.490!    *****    Új mese a Mesetárban! Téged is vár, gyere bátran!    *****    Veterán anime rajongók egyik kedvence a Vadmacska kommandó. Retrospektív cikket olvashatsz róla az Anime Odyssey blogban    *****    Parfümök, Olajok, Párologtatók mind egy weboldalon! Siess mert nyitási AKCIÓNK nem sokáig tart! Nagy kedvezmények várnak    *****    Dryvit, hõszigetelés! Vállaljuk családi házak, nyaralók és egyéb épületek homlokzati szigetelését! 0630/583-3168 Hívjon!    *****    Aki érdeklõdik a horoszkópja után, az nem kíváncsi, hanem intelligens. Rendeld meg most és én segítek az értelmezésben!    *****    A Múzsa, egy gruppi élményei a színfalak mögött + napi agymenések és bölcseletek    *****    KARATE OKTATÁS *** kicsiknek és nagyoknak *** Budapest I. II. XII.kerületekben +36 70 779-55-77    *****    Augusztus 26-án Kutyák Világnapja! Gyertek a Mesetárba, és ünnepeljétek kutyás színezõkkel! Vau-vau!    *****    A horoszkóp elemzésed utáni érdeklõdés, nem kíváncsiság hanem intelligencia. Rendeld meg és nem fogod megbánni. Katt!!!    *****    Cikksorozatba kezdtem a PlayStation történelmérõl. Miért indult nehezen a Sony karrierje a konzoliparban?