previous content next

table.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Praktische Informatik 1</title>
  </head>

  <body>
    <h1>Tabellen</h1>
 
    <p>Eine Tabelle, die sich breit macht:</p>
    <table style= "border:12px solid black; padding:20px; border-spacing:10px;">
      <tr>
        <td> 1. Zeile, 1. Spalte</td>
        <td> 1. Zeile, 2. Spalte</td>
      </tr>
      <tr>
        <td> 2. Zeile, 1. Spalte</td>
        <td> 2. Zeile, 2. Spalte</td>
      </tr>
    </table>
 
    <p>Eine Tabelle mit Ordnung</p>
    <table style="border:2px solid black; width:60%">
      <tr>
        <td style="border:1px solid black; text-align:left">links</td>
        <td style="border:1px solid black; text-align:left">rechts</td>
      </tr>
      <tr>
        <td style="border:1px solid black; height:30px;
		   text-align:center">links</td>
        <td style="border:1px solid black; text-align:center">rechts</td>
      </tr>
      <tr>
        <td style="border:1px solid black; height:50px;
		   text-align:right">links</td>
        <td style="border:1px solid black; text-align:right">rechts</td>
      </tr>
    </table>
    
    <p>Eine unauffällige Tabelle mit Höhen und Tiefen</p>
    <table style="width:60%">
      <tr style="height:50px;">
        <td style="vertical-align:top;">Schau</td>
        <td style="vertical-align:middle;">nach</td>
        <td style="vertical-align:bottom;">rechts:</td>
        <td></td>
      </tr>
      <tr>
        <td>wohin?</td>
        <td>wohin?</td>
        <td>wohin?</td>
        <td> <em>Ach da!</em> </td>
      </tr>
      <tr style="height:50px;">
        <td style="vertical-align:bottom;">Schau</td>
        <td style="vertical-align:middle;">nach</td>
        <td style="vertical-align:top;">rechts:</td>
        <td></td>
      </tr>
    </table>
  </body>
</html>