Autor Zpráva
koki
Profil *
#1 · Zasláno: 19. 4. 2007, 14:54:51
Odpovědět Citovat
Poradte mi prosim jak poskladat tuto tabulku dle CSS stylů, pokud to jde. (pokud ne tak prostřednitvím tr a td)
Ikony mam

Joker
Profil
#2 · Zasláno: 19. 4. 2007, 15:14:51
Odpovědět Citovat
Poradte mi prosim jak poskladat tuto tabulku dle CSS stylů, pokud to jde. (pokud ne tak prostřednitvím tr a td)
Lidi, lidi... to, že se tabulky nemají v HTML používat k definici vzhledu webu ještě neznamená, že jsou špatné tabulky jako takové ;-)

Tabulky v HTML jsou určené pro tabulková data. Nemá se s nimi tedy tvořit například vzhled webu. Tohle jsou ale tabulková data, takže by naopak byla chyba to narvat do <div> + CSS.

Samotná ta tabulka je poměrně primitivní, nevidím tam nějaký větší zádrhel. Horní řádek se hodí do <thead>, ten zbytek je <tbody>, té levé buňce se nastaví rowspan.

Ohledně těch záložek dole, to bych udělal zvlášť, udělal bych tří <div> a jejich viditelnost přepínal Javascriptem, nejspíš.
koki
Profil *
#3 · Zasláno: 19. 4. 2007, 15:20:32
Odpovědět Citovat
Ty zalozky tam budou jak jsou videt a kdyz na ne kliknu tak se stáhne pdf. Jen potřebuji poradit jak prakticky na to.S tabulkama jsem nikdy nedelal, jak tam dostat ty barvy a ty ohraniceni.
Vladosik
Profil
#4 · Zasláno: 19. 4. 2007, 15:47:40
Odpovědět Citovat
koki
Tak proc se to nenaucis, mas to za par minut... http://www.jakpsatweb.cz/tabulky.html
shamania
Profil
#5 · Zasláno: 19. 4. 2007, 15:50:19 · Upravil/a: shamania
Odpovědět Citovat
Koki
http://www.jakpsatweb.cz/html/tabulky.html#table ;)
no a pak jednoltivejm elementům tabulky (table, th, td) můžeš nastavit css. Konkrétně u toho th třeba nastavíš background s obrázkem

--
jsem druhý :(
:)
koki
Profil *
#6 · Zasláno: 19. 4. 2007, 16:47:08
Odpovědět Citovat
Tak html mám takto

<tr valign=top>
<td colspan=2>
<table border=0 cellpadding=0 cellspacing=0 width=531 align=center>
<tr>
<td class=td_table align=center>
<font class=tableHead>Barva</font>
</td>
<td class=td_table align=center>
<font class=tableHead>Rozměry mm</font>
</td>
<td class=td_table align=center>
<font class=tableHead>Obsah kartonu</font>
</td>
</tr>
<tr>
<td align=center class=td_table_under colspan=3>
<table border=0 cellpadding=3 cellspacing=3 width=100%>
<tr valign=middle>
<td width=30% align=center>
<font class=default>černá</font>
</td>
<td width=30% align=center>
<font class=default>
20 x 8<br>
25 x 8<br>
30 x 8<br>
35 x 8<br>
40 x 8<br>
50 x 10<br>
</font>
</td>
<td width=30% align=center>
<font class=default>
104<br>
78<br>
73<br>
63<br>
48<br>
31<br>
</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align=right colspan=3 height=19 class=td_table_border>
<a href=prospekty/prospekt1.pdf target=_blank><img src=images/btn_prospekt.jpg width=78 height=19 border=0></a>
<a href=smernice/tech1.pdf target=_blank><img src=images/btn_smernice.jpg width=128 height=19 border=0></a>
<a href=bezpec_list/bezlist1.doc target=_blank><img src=images/btn_list.jpg width=117 height=19 border=0></a>&nbsp;
</td>
</tr>
</table>
</td>
</tr>




a CSS takto:
=========
td {
font-family: Arial, Helvetica, sans-serif;
}

.td_left {
background-image: url("../images/left_border.jpg);
background-repeat: repeat-y;
}
.td_right {
background-image: url("../images/right_border.jpg);
background-repeat: repeat-y;
}
.td_left_main {
background-image: url("../images/bg_left_menu.jpg);
background-repeat: repeat-y;
}
.td_bottom {
background-image: url("../images/bg_bottom.jpg);
background-repeat: repeat-x;
}
.td_table {
background-image: url("../images/bg_table_head.jpg);
background-repeat: repeat-x;
height: 25px;
width: 177px;
}
.td_table_under {
background-image: url("../images/bg_table.jpg);
background-repeat: repeat-y;
}
.td_table_border {
background-image: url(images/table_border.jpg);
background-repeat: repeat-x;
}

.tableHead {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #333333;
}



A výsledek je tento nemám tam to pozadí, přestože v CSS pozadí je definovane

Manq
Profil
#7 · Zasláno: 19. 4. 2007, 18:52:07 · Upravil/a: Manq
Odpovědět Citovat
background-image: url('images/table_border.jpg');

u všeho si zkus takto doplnit uvozovky

dělají se alt+39 na numerické.
Trejpa
Profil
#8 · Zasláno: 19. 4. 2007, 21:59:57
Odpovědět Citovat
koki
Nepochopil jsi smysl tabulek. Není účelem rozdělit text do tří sloupců, ale do tabulky s řádky a ve tvém případě ještě první buňku v těle tabulky sloučit s buňkami níže (roztáhnout). V tabulce není potřeba použít <br>, měla by být čitelná po řádcích. Takže nějak takto (tlačítka dole jsem neřešil): 
<style type="text/css">

.tabulka *, .tabulka { margin: 0; padding: 0; border: 0; font-family: Arial, sans-serif; font-size: small; }

.tabulka { width: 531px; border: #ccc solid 1px; border-collapse: collapse; }

.tabulka td { padding: 0.1em 1ex; text-align: center; }

.tabulka thead { background: #ccc url(../images/bg_table_head.jpg) repeat-x bottom; }

.tabulka tbody { background: #eee; }

</style>

<table cellpadding="10" class="tabulka" width="531">

<thead>  <!-- HLAVIČKA TABULKY -->

<tr><td>Barva</td><td>Rozměry mm</td><td>Obsah kartonu</td></tr>

</thead>

<tbody>  <!-- TĚLO TABULKY -->

<tr><td rowspan="6">černá</td><td>20 &times; 8</td><td>104</td></tr><!--počet sloučených buněk rowspan="6" -->

<tr><td>25 &times; 8</td><td>78</td></tr><!-- tady už se sloučená buňka neopakuje -->

<tr><td>30 &times; 8</td><td>73</td></tr>

<tr><td>35 &times; 8</td><td>63</td></tr>

<tr><td>40 &times; 8</td><td>48</td></tr>

<tr><td>50 &times; 10</td><td>31</td></tr>

</tbody>

</table>


Podle mě je zbytečné definovat ve stylu obrázek pro okraje, když existuje css vlastnost border. Ohledně těch uvozovek: funguje to i bez nich, ale ty jsi tam udělal chybu, že jsi je začal, ale neukončil (jako adresa obrázku se vyhodnocovalo i vše za nimi).
Časová prodleva: 17 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0