home *** CD-ROM | disk | FTP | other *** search
/ PC World 2002 December / PCWorld_2002-12_cd.bin / Novinky / interval / img / 70 / td.html < prev   
Encoding:
Extensible Markup Language  |  2002-10-30  |  6.4 KB  |  350 lines
  1. <?xml version="1.0" encoding="windows-1250"?>
  2. <!DOCTYPE html
  3.      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  4.     "DTD/xhtml1-strict.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
  6.  
  7. <head>
  8.   <meta http-equiv="Content-type" content='text/html; charset="windows-1250"' />
  9.   <title>Tabulky</title>
  10.   <style type="text/css">
  11.   .default {
  12.             font-family: "Trebuchet MS", helvetica, arial, sans-serif;
  13.             background-color: #ffffcc;
  14.            }
  15.   #main {
  16.      border-collapse: collapse;
  17.     }
  18.   #main td {
  19.      border: solid 1px black;
  20.      padding: 1ex;
  21.     }
  22.   .nfo {
  23.      text-align: justify;
  24.      vertical-align: top;
  25.     }
  26.   .nfo:first-letter {
  27.      font-size: 200%;
  28.      float: left;
  29.      padding: 3px;
  30.     }
  31.   #main table {
  32.      margin-top: 1em;
  33.      margin-left: 25%;
  34.     }
  35.   #main table td {
  36.      padding: 0.5ex;
  37.     }
  38.   #tb01 {
  39.      border: solid 1px black;
  40.     }
  41.   #tb01 td {
  42.      border: solid 1px black;
  43.     }
  44.   #tb02 {
  45.      border-top: solid 2px blue;
  46.      border-bottom: double 3px black;
  47.     }
  48.   #tb02 td {
  49.      border: none;
  50.      border-top: solid 1px silver;
  51.     }
  52.   #tb02 td#important {
  53.      border: dashed 1px red;
  54.    }
  55.   #tb03 {
  56.      border: outset 2px black;
  57.      border-spacing: 1px 8px;
  58.     }
  59.   #tb03 td {
  60.      border: inset 1px black;
  61.     }
  62.   #tb04 {
  63.      border: solid 2px;
  64.      border-color: #fff #888 #888 #fff;
  65.     }
  66.   #tb04 td {
  67.      border: solid 1px;
  68.      border-color: #888 #fff #fff #888;
  69.     }
  70.   #tb05 {
  71.      border-collapse: collapse;
  72.      border: solid 2px red;
  73.     }
  74.   #tb05 td {
  75.      border: solid 2px black;
  76.     }
  77.   #tb06 {
  78.      border-collapse: collapse;
  79.     }
  80.   #tb06 td {
  81.      border: none;
  82.     }
  83.   #tb06 td#b01 {
  84.      background-image: url(b1.gif);
  85.     }
  86.   #tb06 td#b02 {
  87.      background-image: url(b2.gif);
  88.     }
  89.   #tb06 td#b03 {
  90.      background-image: url(b3.jpg);
  91.     }
  92.   #tb06 td#b04 {
  93.      background-image: url(b4.jpg);
  94.      empty-cells: show;
  95.     }
  96.   #tb07 {
  97.      border: solid 1px black;
  98.      empty-cells: hide;
  99.      caption-side: top;
  100.     }
  101.   #tb08 {
  102.      border: solid 1px black;
  103.      empty-cells: show;
  104.     }
  105.   .dole {
  106.      margin-left: 25%;
  107.     }
  108.   caption {
  109.      text-align: left;
  110.      margin-left: 25%;
  111.     }
  112.  
  113.   </style>
  114. </head>
  115.  
  116. <body class="default">
  117. <table id="main">
  118.   <tr>
  119.     <td colspan="2" class="nfo">
  120.     1 V²chozφm modelem okraj∙ bun∞k v tabulce je separßtnφ model, p°i kterΘm
  121.     je nutnΘ pohlφdat si zvlßÜ¥ rßmovßnφ jednotliv²ch bun∞k a zvlßÜ¥ celΘ
  122.     tabulky. Rßmovßnφ pro jednotlivΘ °ßdky nelze aplikovat.
  123.     </td>
  124.   </tr>
  125.   <tr>
  126.     <td>
  127.     Jednoduch² p°φklad orßmovßnφ, kdy pro znaΦky <samp>table</samp> a <samp>td</samp>
  128.     definujeme
  129.     <samp>{border: solid 1px black}</samp>
  130. <table id="tb01">
  131.   <tr>
  132.     <td>
  133.      Bu≥ka A1
  134.     </td>
  135.     <td>
  136.      Bu≥ka A2
  137.     </td>
  138.   </tr>
  139.   <tr>
  140.     <td>
  141.      Bu≥ka B1
  142.     </td>
  143.     <td>
  144.      Bu≥ka B2
  145.     </td>
  146.   </tr>
  147. </table>
  148.  
  149.     </td>
  150.     <td>
  151.     P°φklad z textu, ve kterΘm jsou jemn∞ naznaΦeny mo₧nosti
  152.     nastevenφ parametru border:
  153. <table id="tb02">
  154.   <tr>
  155.     <td>
  156.      Bu≥ka A1
  157.     </td>
  158.     <td>
  159.      Bu≥ka A2
  160.     </td>
  161.   </tr>
  162.   <tr>
  163.     <td>
  164.      Bu≥ka B1
  165.     </td>
  166.     <td  id="important">
  167.      Bu≥ka B2
  168.     </td>
  169.   </tr>
  170. </table>
  171.  
  172.     </td>
  173.   </tr>
  174.   <tr>
  175.     <td colspan="2" class="nfo">
  176.     2 Dojem plastickΘho orßmovßnφ bun∞k tabulky lze pomocφ CSS za°φdit
  177.     styly Φßry <em>inset</em> a <em>outset</em> (v IE nefunguje) nebo
  178.     explicitnφm zadanφm barev okraj∙.
  179.     </td>
  180.   </tr>
  181.   <tr>
  182.     <td>
  183.     Tabulka se styly orßmovßnφ <em>inset</em> a <em>outset</em> a s
  184.     upraven²mi mezerami mezi bu≥kami pomocφ parametru <em>border-spacing</em>
  185.     (zde jako obrßzek):<br />
  186.     <img src="table2a.png" class="dole" />
  187. <!--
  188. <table id="tb03">
  189.   <tr>
  190.     <td>
  191.      Bu≥ka A1
  192.     </td>
  193.     <td>
  194.      Bu≥ka A2
  195.     </td>
  196.   </tr>
  197.   <tr>
  198.     <td>
  199.      Bu≥ka B1
  200.     </td>
  201.     <td>
  202.      Bu≥ka B2
  203.     </td>
  204.   </tr>
  205. </table>
  206. -->
  207.  
  208.     </td>
  209.     <td>
  210.     Tabulka s explicitnφm zadßnφm barevn²ch hodnot pro okraje bun∞k a tabulky:
  211. <table id="tb04">
  212.   <tr>
  213.     <td>
  214.      Bu≥ka A1
  215.     </td>
  216.     <td>
  217.      Bu≥ka A2
  218.     </td>
  219.   </tr>
  220.   <tr>
  221.     <td>
  222.      Bu≥ka B1
  223.     </td>
  224.     <td>
  225.      Bu≥ka B2
  226.     </td>
  227.   </tr>
  228. </table>
  229.  
  230.     </td>
  231.   </tr>
  232.   <tr>
  233.     <td colspan="2" class="nfo">
  234.     3 P°i zhroucenΘm modelu okraj∙ bun∞k tabulky splynou sousednφ okraje
  235.     v jeden celek. Pokud jsou okraje zobrazeny, vypadß orßmovßnφ tabulky
  236.     jako m°φ₧ka, pokud ne, mohou obsahy sousednφch bun∞k le₧et t∞sn∞ vedle
  237.     sebe. Zhroucen² model pou₧φvß i hlavnφ tabulka na tΘto strßnce s p°φklady.
  238.     </td>
  239.   </tr>
  240.   <tr>
  241.     <td>
  242.     Typick² m°φ₧kovit² vzhled tabulky se zhroucen²m modelem okraj∙ bun∞k.
  243.     Tato tabulka bude mφt navφc v Internet Exploreru Φerven² okraj, zatφmco
  244.     v Mozille nikoliv.
  245. <table id="tb05">
  246.   <tr>
  247.     <td>
  248.      Bu≥ka A1
  249.     </td>
  250.     <td>
  251.      Bu≥ka A2
  252.     </td>
  253.   </tr>
  254.   <tr>
  255.     <td>
  256.      Bu≥ka B1
  257.     </td>
  258.     <td>
  259.      Bu≥ka B2
  260.     </td>
  261.   </tr>
  262. </table>
  263.  
  264.     </td>
  265.     <td>
  266.     Vyu₧itφ zhroucenΘho modelu tabulky k zobrazenφ obsahu bun∞k t∞sn∞ vedle,
  267.     v tomto p°φklad∞ obrßzk∙:
  268. <table id="tb06">
  269.   <tr>
  270.     <td id="b01">
  271.      Bu≥ka A1
  272.     </td>
  273.     <td id="b02">
  274.      Bu≥ka A2
  275.     </td>
  276.   </tr>
  277.   <tr>
  278.     <td id="b03">
  279.      Bu≥ka B1
  280.     </td>
  281.     <td id="b04">
  282.      Bu≥ka B2
  283.     </td>
  284.   </tr>
  285. </table>
  286.  
  287.     </td>
  288.   </tr>
  289.   <tr>
  290.     <td colspan="2" class="nfo">
  291.     4 Podle druhΘ verze specifikace kaskßdov²ch styl∙ je mo₧nΘ parametrem
  292.     <em>empty-cell</em> ovlivnit chovßnφ okraj∙ u prßzdn²ch bun∞k a parametrem
  293.     <em>caption-side</em> urΦit umφst∞nφ popisku k tabulce oznaΦkovanΘho jako
  294.     <samp><caption></samp>. Cht∞jme tedy, aby okraje u prßzdn²ch bun∞k
  295.     byly viditelnΘ a popisek byl dole pod tabulkou.
  296.     </td>
  297.   </tr>
  298.   <tr>
  299.     <td>
  300.     Takto bude v²sledek vypadat v Internet Exploreru, kter² v²Üe zmφn∞n²m parametr∙m
  301.     nerozumφ, tak₧e pro zobrazenφ tabulky pou₧ije vlastnφ v²chozφ nastavenφ.
  302. <table id="tb07">
  303.   <caption>Popisek k tabulce</caption>
  304.   <tr>
  305.     <td>
  306.      Bu≥ka A1
  307.     </td>
  308.     <td>
  309.      Bu≥ka A2
  310.     </td>
  311.   </tr>
  312.   <tr>
  313.     <td>
  314.      Bu≥ka B1
  315.     </td>
  316.     <td></td>
  317.   </tr>
  318. </table>
  319.  
  320.     </td>
  321.     <td>
  322.     V Mozille, kterß sice neumφ umφstit popisek nalevo ani napravo, ale
  323.     dol∙ ano, ji₧ bude v²sledek vypadat podle zadßnφ:
  324. <table id="tb08">
  325.   <tr>
  326.     <td>
  327.      Bu≥ka A1
  328.     </td>
  329.     <td>
  330.      Bu≥ka A2
  331.     </td>
  332.   </tr>
  333.   <tr>
  334.     <td>
  335.      Bu≥ka B1
  336.     </td>
  337.     <td><br /></td>
  338.   </tr>
  339. </table>
  340. <div class="dole">Popisek k tabulce</div>
  341.  
  342.     </td>
  343.   </tr>
  344. </table>
  345.  
  346. </body>
  347. </html>
  348.  
  349.  
  350.