Anton: Tabelle mit CSS möglichst elegant formatieren

Beitrag lesen

SELF-Forum

Tabelle mit CSS möglichst elegant formatieren

Anton
– Informationen zu den Bewertungsregeln

Grüßt euch,

bisher hab ich noch nie eine Tabelle mit CSS formatiert. Ich benötige eine Tabelle mit drei Zeilen und drei Spalten. Die erste Spalte soll 200 Pixel breit sein. Die zweite Spalte soll den Rest des verfügbaren Platzes in Anspruch nehmen.

Habs mal folgendermaßen probiert. So wirklich elegant finde ich die Lösung nicht. Weiß allerdings nicht wie ich es besser machen könnte. Außerdem bekomme ich die folgenden Dinge nicht hin:

1.)
"Textfeld" soll nicht vertikal zentriert angezeigt werden. Es soll am oberen linken Rand der Zelle positioniert werden. Wie kann ich das hinbekommen?

2.)
Die Buttons "Formular löschen" und "Formular absenden" sollen nebeneinander dargestellt werden. Sie werden allerdings untereinander angezeigt. ich verstehe nicht warum das so ist, da ich ja jedem button die Hälfte des verfübaren Platzes zugewiesen habe (50%). Wo liegt hier mein Fehler.

3.)
Wie könnte ich die Formatierng denn eleganter lösen? Ich finde meine Lösung nicht wirklich gut... weiß aber nicht wie ich es besser machen könnte.

Hier noch der Code aus meinen Tests:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  
<html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    <style type="text/css">  
      * {  
        margin: 0px;  
        padding: 0px;  
      }  
  
      table {  
        background: blue;  
        width: 100%;  
        border-spacing: 10px;  
        table-layout: fixed;  
      }  
  
      #columnOne {  
        width: 200px;  
      }  
  
      #textbox {  
        width: 100%;  
      }  
  
      #buttonDelete {  
        width: 50%;  
      }  
  
      #buttonSend {  
        width: 50%;  
      }  
    </style>  
  </head>  
  <body>  
    <table>  
      <tr>  
        <td id="columnOne">Nachname:</td>  
        <td>  
          <input type="text" name="nachname" value=""/>  
        </td>  
      </tr>  
      <tr>  
        <td>Vorname:</td>  
        <td>  
          <input type="text" name="vorname" value=""/>  
        </td>  
      </tr>  
      <tr>  
        <td>Textfeld:</td>  
        <td>  
          <textarea rows="12" name="text" id="textbox"></textarea>  
        </td>  
      </tr>  
      <tr>  
        <td>Formular:</td>  
        <td>  
          <input type="reset" value="Formular löschen" id="buttonDelete"/  
          <input type="submit" name="abschicken" value="Formular absenden" id="buttonSend"/>  
        </td>  
      </tr>  
    </table>  
  </body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln