Živá ukázka

Výsledek

<style>
.okno {display: none}
.okno1 {display: none; color: red}
</style>
<script>
function zobrazSkryj(idelementu){
el=document.getElementById(idelementu).style;
el.display=(el.display == 'block')?'none':'block';}
</script>
	<script>
function zobrazSkryj2 (idelementu, body) {
    var total = document.getElementById('total');
    var el = document.getElementById(idelementu).style;
    
    if (el.display == 'block') {
        el.display = 'none';
        total.innerHTML = parseInt(total.innerHTML) - body;
    } else {
        el.display = 'block';
        total.innerHTML = parseInt(total.innerHTML) + body;
    }
}
</script>
</head>
<body>
<center>
	<br>
<table width="1024px" border="1" bordercolor="#000000" cellspacing="0" cellpadding="0" bgcolor="#000000">
  <tbody>
    <tr>
      <td class="otazka"><h1>Do ktorého štátu okrem Slovenska, vyváža naša firma najviac výrobkov?</h1></td>
    </tr>
  </tbody>
</table>
<br><br>
<table width="1024px" border="1" bordercolor="#000000" cellspacing="0" cellpadding="0" background="bg.jpg">
  <tbody>
    <tr>
      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="10%" align="center"><h2>1.</h2></td>
      <td width="70%"><h2 id="odpoved1" class="okno">Česko</h2></td>
      <td width="10%" align="center"><h2 id="body1a" class="okno1">48</h2></td>
	  <td width="10%" align="center"><h2 id="body1" class="okno">48</h2></td>
    </tr>
  </tbody>
</table>
</td>
    </tr>
    <tr>
      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="10%" align="center"><h2>2.</h2></td>
      <td width="70%"><h2 id="odpoved2" class="okno">Poľsko</h2></td>
      <td width="10%" align="center"><h2 id="body2a" class="okno1">24</h2></td>
	  <td width="10%" align="center"><h2 id="body2" class="okno">24</h2></td>
    </tr>
  </tbody>
</table></td>
    </tr>
    <tr>
      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="10%" align="center"><h2>3.</h2></td>
      <td width="70%"><h2 id="odpoved3" class="okno">Maďarsko</h2></td>
      <td width="10%" align="center"><h2 id="body3a" class="okno1">8</h2></td>
	  <td width="10%" align="center"><h2 id="body3" class="okno">8</h2></td>
    </tr>
  </tbody>
</table></td>
    </tr>
    <tr>
      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="10%" align="center"><h2>4.</h2></td>
      <td width="70%"><h2 id="odpoved4" class="okno">Nemecko</h2></td>
      <td width="10%" align="center"><h2 id="body4a" class="okno1">6</h2></td>
	  <td width="10%" align="center"><h2 id="body4" class="okno">6</h2></td>
    </tr>
  </tbody>
</table></td>
    </tr>
    <tr>
      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="10%" align="center"><h2>5.</h2></td>
      <td width="70%"><h2 id="odpoved5" class="okno">Čína</h2></td>
      <td width="10%" align="center"><h2 id="body5a" class="okno1">5</h2></td>
	  <td width="10%" align="center"><h2 id="body5" class="okno">5</h2></td>
    </tr>
  </tbody>
</table></td>
    </tr>
  </tbody>
</table>
<table width="1024px" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="70%">&nbsp;</td>
      <td width="30%"><table width="100%" border="1" cellspacing="0" cellpadding="0" background="bg.jpg">
  <tbody>
    <tr>
      <td width="65%"><h2>&nbsp; Spolu:</h2></td>
      <td width="35%" align="center"><h2 id="total">0</h2></td>
    </tr>
  </tbody>
</table>
</td>
    </tr>
  </tbody>
</table><br>
<table width="1024px" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr height="92px">
      <td width="90px" align="center" background="pozadie-x.png"><h1 id="x1" class="okno">X</h1></td>
      <td width="90px" align="center" background="pozadie-x.png"><h1 id="x2" class="okno">X</h1></td>
      <td width="90px" align="center" background="pozadie-x.png"><h1 id="x3" class="okno">X</h1></td>
      <td width="187px">&nbsp;</td>
	  <td width="100px" background="bg.jpg">&nbsp;</td>
	  <td width="187px">&nbsp;</td>
      <td width="90px" align="center" background="pozadie-x.png"><h1 id="x4" class="okno">X</h1></td>
      <td width="90px" align="center" background="pozadie-x.png"><h1 id="x5" class="okno">X</h1></td>
      <td width="90px" align="center" background="pozadie-x.png"><h1 id="x6" class="okno">X</h1></td>
    </tr>
  </tbody>
</table>

<br><br><br><br>
<table width="1042" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
  <tbody>
    <tr>
	  <td><h5><a href="index.php">index</a></h5></td>
      <td><h5 onclick="zobrazSkryj('x1')">X1</h5></td>
      <td><h5 onclick="zobrazSkryj('x2')">X2</h5></td>
      <td><h5 onclick="zobrazSkryj('x3')">X3</h5></td><td width="100px">&nbsp;</td>
	  <td><h5>odpoveď</h5></td>
      <td><h5 onclick="zobrazSkryj('odpoved1')">1</h5></td>
      <td><h5 onclick="zobrazSkryj('odpoved2')">2</h5></td>
      <td><h5 onclick="zobrazSkryj('odpoved3')">3</h5></td>
      <td><h5 onclick="zobrazSkryj('odpoved4')">4</h5></td>
      <td><h5 onclick="zobrazSkryj('odpoved5')">5</h5></td><td width="100px">&nbsp;</td>
      <td><h5>body</h5></td>
	  <td><h5 onclick="zobrazSkryj2('body1',48)">b1</h5></td>
      <td><h5 onclick="zobrazSkryj2('body2',24)">b2</h5></td>
      <td><h5 onclick="zobrazSkryj2('body3',8)">b3</h5></td>
      <td><h5 onclick="zobrazSkryj2('body4',6)">b4</h5></td>
      <td><h5 onclick="zobrazSkryj2('body5',5)">b5</h5></td><td width="100px">&nbsp;</td>
	  <td><h5>niebody</h5></td>
	  <td><h5 onclick="zobrazSkryj('body1a',48)">b1</h5></td>
      <td><h5 onclick="zobrazSkryj('body2a',24)">b2</h5></td>
      <td><h5 onclick="zobrazSkryj('body3a',8)">b3</h5></td>
      <td><h5 onclick="zobrazSkryj('body4a',6)">b4</h5></td>
      <td><h5 onclick="zobrazSkryj('body5a',5)">b5</h5></td><td width="100px">&nbsp;</td>
	  <td><h5 onclick="zobrazSkryj('x4')">X1</h5></td>
      <td><h5 onclick="zobrazSkryj('x5')">X2</h5></td>
      <td><h5 onclick="zobrazSkryj('x6')">X3</h5></td><td width="100px">&nbsp;</td>
	  <td><h5><a href="body1.php">tabuľka</a></h5></td>
    </tr>
  </tbody>
</table>

</center>
</body>
</html>

HTML

Autoformát
Standardní režim
Mobilní zobrazení

CSS

Autoformát
CSS reset
Až na konci

JS

Autoformát
jQuery
Umístění JS