Autor Zpráva
MíšaH.
Profil *
Zdravím,
potřebovala bych poradit - mám to do školy na test a už nevím co s tím (není to přímo test, jen příklad pro trénink).

Mělo by to vypadat zhruba takhle:
Odkaz na vzor Text a obrázek mám trochu jiné, to není důležité...

Ale buňka z tabulky "Komunikace" mi pořád nechce zalést na správné místo a taky se to nějak rozjíždí velikostně...
Ale hlavně ta 1 buňka, nevíte, co s tím pls?

Vzhled mé stránky

(Prosím o shovívavost, dělám to prvně...)

<html>

<head>

<link type="text/css"rel="stylesheet" href="style.css"/>

<title> Web test </title>

</head>

<body>

<table align="center" style="margin-top: 50px" cellpadding="20"; cellspacing="20">
  <tr>
    <td colspan="5" height="70" bgcolor="red" style="font-family: Arial Black" align="center": 50px"><strong>Význam paměti</strong></td>
    <td rowspan="3" width="140" align="center" style="color: white" bgcolor="blue"><strong>Přátelství</strong></td>
  </tr>
  <tr>
    <td rowspan="2" width="140" align="center" bgcolor="yellow"><strong>Informace</strong></td>
    <td rowspan="4" colspan="4" bgcolor="white" valign="top">
            Co musí sedět:
            <BR></BR>
            <BR><em>seznam a obrázek</em></BR>
            <ul>
            <li>polka 1</li>
            <li>polka 2</li>
            <ul>
            <li>pol. 1</li>
            <li>pol. 2</li>
            </ul>
            <li>polka 3</li>
            </ul>
            <a href="web 4.html" target="_blank">odkaz z pc.html nebo z webu http:// </a>
            <img src="http://thumbnail016.mylivepage.com/chunk16/314324/204/small_mozek1.jpg.jpg" alt="MOZEK">
  </tr>
  <tr align="center">
    <td rowspan="2" width="140" bgcolor="#2efa0a"><strong>Komunikace</strong></td>
  </tr>
  <tr>
    <td rowspan="4" width="140" align="center" bgcolor="red"><strong>Myšlení</strong></td>
    <td rowspan="4" width="140" bgcolor="yellow" valign="top">TEXT</td>
  </tr>
</table>

</body>

</html>

Style.css obsahuje toto:

Body {background-color: red;}

td {border: 1px solid silver;}

table {border: 2px solid white; width: 740px; height: 740px; 

background-color: green;}
nounejm
Profil *
1. ve škole vám říkali, ať to děláte pomocí tabulek?
2. pokud se buňka tabulky odsune nakonec, tak to s největší pravděpodobností znamená, že se do tabulky nevešla. Jsou tam nastaveny nějaké šířky a výšky a vnitřní buňky mají asi větší výšku, než ta vnější.


... anebo jsou tam špatně tagy <tr><td> - už tam vidím jeden neuzavřený <td> - tabulka je potom rozhozená
ts_istudio
Profil
nounejm:
1. ve škole vám říkali, ať to děláte pomocí tabulek?

V obrázku se zadáním je řeč o tabulce a buňkách. O úrovni učitele to hodně vypovídá.
nounejm
Profil *
jinak by se to mělo dělat pomocí bloků:
Jak zarovnat dva blokové prvky vedle sebe?
1.oba prvky obalíme vnějąím <div>
2.vnitřním blokům nastavíme vlastnost float: left;
3.za pravý sloupec v HTML vloľíte prázdný <div class="cistic"></div>
4.v CSS definujete - div.cistic { clear: both; height: 1px; margin-top: -1px; padding: 0; border: 0; visibility: hidden; }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>TEST</title>
  <style>
    * {border: 0px; margin: 0px; padding: 0px;}
    div.cistic { clear: both; height: 1px; margin-top: -1px; padding: 0; border: 0; visibility: hidden; }
    body { background-color: red; }
    div#stranka { border: 3px solid white; margin: 45px auto 0px auto; width: 800px; background-color: green; }
    div#logo { border: 1px solid white; margin: 20px 10px 10px 20px; width: 575px; height: 65px; background-color: red; }
    div#levy { float: left; }
    div#informace { border: 1px solid white; margin: 10px 10px 20px 20px; width: 140px; height: 140px; background-color: yellow; }
    div#komunikace { border: 1px solid white; margin: 10px 10px 20px 20px; width: 140px; height: 140px; background-color: lime; }
    div#mysleni { border: 1px solid white; margin: 10px 10px 20px 20px; width: 140px; height: 235px; background-color: red; }
    div#prostredni { margin: 10px 10px 20px 10px; width: 415px; height: 562px; float: left; background-color: white; }
    div#levyobal { float: left; }
    div#pravyobal { float: left; }
    div#pratelstvi { border: 1px solid white; margin: 20px 10px 20px 10px; width: 158px; height: 390px; background-color: blue; }
    div#text { border: 1px solid white; margin: 10px 10px 20px 10px; width: 158px; height: 235px; background-color: yellow; }
  </style>
  </head>
  
  <body>
    <div id="stranka">
      <div id="levyobal">
        <div id="logo">
          Význam tréningu lidské paměti
        </div>
        <div id="levy">
          <div id="informace">
            informace
          </div>
          <div id="komunikace">
            komunikace
          </div>
          <div id="mysleni">
            mysleni
          </div>          
        </div>
        <div id="prostredni">        
          prostredni  
        </div>
        <div class="cistic"></div>
      </div>
      <div id="pravyobal"> 
        <div id="pratelstvi">
            pratelstvi
        </div>
        <div id="text">
          text
        </div>
      </div> 
      <div class="cistic"></div>       
    </div>
  </body>
  
</html>
styly jsem dal přímo do html, ať se to dobře kopíruje
Trejpa
Profil
MíšaH.:
Těch colspanů a rowspanů tam máš moc. Ta tabulka má tři sloupce a čtyři řádky. Postupuj po řádcích zleva. Když narazíš na buňku, tak ji napiš. Pokud má na tom místě začínat širší nebo vyšší buňka, doplň colspan nebo rowspan. Pokud jsi na místě, kam přesahuje shora nebo zleva jiná buňka, tak ji vynech.

Jinak </BR> v HTML neexistuje a seznam nemůžeš zanořit přímo do jiného seznamu, ale až do jedné z jeho položek. Středník se za HTML atributy nepíše (cellpadding="20";). Tohle je taky nějaký pohrobek (align="center": 50px")

Oprava: Doplnění uvozovek kolem víceslovného názvu písma (upozornil nounejm).

<table align="center" style="margin-top: 50px" cellpadding="20" cellspacing="20">
  <tr>
    <td colspan="2" height="70" bgcolor="red" style="font-family: 'Arial Black';" align="center"><strong>Význam paměti</strong>
    <td rowspan="3" width="140" align="center" style="color: white" bgcolor="blue"><strong>Přátelství</strong>
  <tr>
    <td width="140" align="center" bgcolor="yellow"><strong>Informace</strong>
    <td rowspan=3 bgcolor="white" valign="top" width="460">
            Co musí sedět:<BR><BR>
        <em>seznam a obrázek</em>
            <ul>
              <li>polka 1</li>
              <li>polka 2
                <ul>
                    <li>pol. 1</li>
                   <li>pol. 2</li>
                </ul>
          </li>
              <li>polka 3</li>
            </ul>
            <a href="web 4.html" target="_blank">odkaz z pc.html nebo z webu http:// </a>
            <img src="http://thumbnail016.mylivepage.com/chunk16/314324/204/small_mozek1.jpg.jpg" alt="MOZEK">
  <tr align="center">
    <td width="140" bgcolor="#2efa0a"><strong>Komunikace</strong>
  <tr>
    <td width="140" align="center" bgcolor="red"><strong>Myšlení</strong>
    <td width="140" bgcolor="yellow" valign="top">TEXT
</table>


nounejm:
pokud se buňka tabulky odsune nakonec, tak to s největší pravděpodobností znamená, že se do tabulky nevešla
Ne, to znamená chybu v počtu buněk vedle sebe, případně zadání colspanu.

... anebo jsou tam špatně tagy <tr><td> - už tam vidím jeden neuzavřený <td> - tabulka je potom rozhozená
Koncová značka buněk i řádků tabulky není povinná, takže nechybí.

jinak by se to mělo dělat pomocí bloků:
Když se ve škole učí tabulky, tak ne. Máš to zbytečně upovídané.
peta
Profil
Co treba pouzit validator?
na radku 15 je chyba align="center": 50px">
na radku 13 je chyba cellpadding="20";
na radku 22 je chyba <BR></BR>
A tu td komunikace bude treba presunout do tr k td informace a mysleni.
---
Jo, ty colspan, rowspan jsou tez divne.
<table border=1> <!-- to doporucuju, aby bylo videt, co se s cim rameckuje -->
<tr>
<td colspan=3> hlavicka</td> <!-- spoj 3 bunky vedle sebe -->
<tr>
<td> a</td>
<td rowspan=3> b</td> <!-- spoj 3 bunky pod sebou -->
<td rowspan=2> c</td> <!-- spoj 2 bunky pod sebou -->
<tr>
<td> aa</td>
<tr>
<td> aaa</td>
<td> ccc</td>
</table>
nounejm
Profil *
Trejpa:
Máš to zbytečně upovídané. - a co mám vyhodit?
style="font-family: Arial Black" - to Black to už nevezme
Když se ve škole učí tabulky, tak ne. - nikde tam není napsané, že se to tak učí ani, že by to mělo být v tabulkách (podle mě nemělo)
Koncová značka buněk i řádků tabulky není povinná, takže nechybí. - tak to mě překvapilo, přesto bych takový nevalidní kód nikoho neučil
_es
Profil
Trejpa:
To mixovanie formátovania cez HTML atribúty a CSS asi nie je práve najlepšie na výuku. Asi by bolo lepšie použiť buď len HTML atribúty a HTML značky, alebo len CSS.
Trejpa
Profil
_es:
V každém případě je vhodné znát oba způsoby. Jejich kombinování při učení dodá vyučovanému zase možnost přímého porovnání a může se tak naučit vhodnosti využití toho kterého způsobu.

nounejm:
Zbytečně se usvědčuješ z neznalosti.

a co mám vyhodit?
Znáš sdružené zadávání CSS vlastností?
#informace, #komunikace, #mysleni { border: 1px solid white; width: 140px; }
#prostredni, #levyobal, #pravyobal { float: left; }

není napsané, že se to tak učí ani, že by to mělo být v tabulkách
Je to typický školní příklad kombinující vše, co se naučili („mám to do školy na test“).

tak to mě překvapilo, přesto bych takový nevalidní kód nikoho neučil
Nejdřív si zjisti, jak funguje HTML. Ne že by na tom záleželo, ale tohle validní je.
_es
Profil
Trejpa:
Jejich kombinování při učení dodá vyučovanému zase možnost přímého porovnání
Lepšie porovnanie by snáď bolo pomocou dvoch riešení:
1) Formátovanie len pomocou HTML, úplne bez CSS.
2) Formátovanie len pomocou CSS, bez HTML značiek a atribútov pre formátovanie.

Keď už „ukážkový“ kód s využitím toho, že sú niektoré koncové značky nepovinné, tak by sa asi mali z neho odstrániť aj značky </li>.
Trejpa
Profil
_es:
tak by sa asi mali z neho odstrániť aj značky </li>.
Mám je tam úmyslně, demonstruji jimi správné zanoření seznamu. Bez uvedení koncových značek by nebyl můj didaktický úmysl patrný na první pohled.
_es
Profil
Trejpa:
Mám je tam úmyslně, demonstruji jimi správné zanoření seznamu.
Nevidím z tohto hľadiska rozdiel v zanorení zoznamu a automatického ukončenia li a možnom zanorení tabuliek či automatického ukončenia riadkov a buniek - teda je vynechanie </li> ekvivalentné vynechaniu </td> či </tr>.
Trejpa
Profil
_es:
Když nechápeš důvod mého zápisu ani po mém vysvětlení, tak se nemám o čem bavit. Na téma nepovinných koncových značek už zde reagovat nebudu.
Chamurappi
Profil
Reaguji na _es:
Špatně umístěné </li> může (nespolehlivě) změnit strukturu kódu (u tabulky je to obtížnější). MíšaH. ji změněnou má — má podseznam přímo v <ul>. Kdyby se jen smazaly ukončovací značky, nebylo by na tuto chybu názorně upozorněno.
_es
Profil
Chamurappi:
Kdyby se jen smazaly ukončovací značky, nebylo by na tuto chybu názorně upozorněno.
Dá sa predsa na chybu upozorniť aj bez zamlčania toho, že značka </li> je nepovinná. Z kódu v Trejpa [#5] skôr môže neznalý prísť k dojmu, že je nutná, hlavne, keď keď nie sú použité analogické nepovinné značky tabuľky.

u tabulky je to obtížnější
Tam môže predsa tiež dôjsť k chybe, že sa bude niekto pokúšať vložiť do tabuľky tabuľku nie do elementu td ale do tr alebo table.
margin
Profil *
nounejm:
style="font-family: Arial Black" - to Black to už nevezme
Vezme, přesto bych doporučil vložit jméno písma obsahující mezeru do uvozovek, tak, jak je to nyní v Trejpově opraveném kódu.
MíšaH.
Profil *
Moc všem děkuju za rady!

Nemusíme to dělat přes tabulky, ale můžeme a já jsem na ten druhý způsob popravdě ani nepřišla :)
Takže díky za druhý způsob i za opravu těch tabulek! (Trejpa a Nounejm)

Snad to nějak zvládnu, pokud ne, velmi pravděpodobně se tu ještě objevím :,)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: