topical media & game development

talk show tell print

basic-css-16-Exercises-exercise16-1.htm / htm



  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html>
      <head>
          <title> HTML tables </title>
          <style type='text/css'>
              * {
                  font-family: monospace;
                  font-size: 100%;
              }
              table {
                  width: 300px;
                  caption-side: bottom;
                  border: thin solid black;
                  table-layout: fixed;
                  /* border-collapse: collapse; is also acceptable */
                  border-spacing: 0;
                  margin: 5px;
              }
              th, td {
                  border: thin solid black;
                  text-align: center;
                  font-weight: bold;
                  /* Kudos if you thought of fixing 
                     table-layout: fixed; in Mozilla 
                     with the overflow: hidden; 
                     declararion. */
                  overflow: hidden;
              }
              th {
                  background: lightgrey;
              }
              td {
                  vertical-align: top;
              }
              caption {
                  font-size: 90%;
                  text-align: right;
              }
              td, th, caption {
                  padding: 5px;
              }
          </style>        
      </head>
      <body>
          <table>
              <caption>
                  Table: My favorite movies.
              </caption>
              <colgroup>
                  <col id='movie' />
                  <col id='cast' />
                  <col id='genre' />
                  <col id='year' />
              </colgroup>
              <thead>
                  <tr>
                      <th> movie            </th>
                      <th> stars            </th>
                      <th> genre            </th>
                      <th> year             </th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td> Bruce Almighty                 </td>
                      <td> Jim Carrey, Jennifer Aniston.. </td>
                      <td> Comedy                         </td>
                      <td> 2003                           </td>
                  </tr>
                  <tr>
                      <td> The Lord of the Rings, the 
                           Fellowship of the Ring 
                           (Extended Edition)             </td>
                      <td> Elijah Wood,  Viggo Mortensen..</td>
                      <td> Action / Adventure             </td>
                      <td> 2002                           </td>
                  </tr>
                  <tr>
                      <td> The Last Samurai               </td>
                      <td> Ken Watanabe, Tom Cruise..     </td>
                      <td> Action / Drama                 </td>
                      <td> 2004                           </td>
                  </tr>
              </tbody>
          </table>
      </body>
  </html>


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.