HTML-Datentabelle mit PHP Online füllen

[Gunnar Bittersmann]

@@Siebat:

nuqneH

Meine Tabelle sieht aktuell so aus

Sollte sie nicht.

<table width="406" border="1" id="news">
  <tr>
    <td width="16"><strong>ID</strong></td>
    <td width="72"><strong>DATUM</strong></td>
    <td width="65"><strong>BETREFF</strong></td>
    <td width="169"><strong>NACHRICHT</strong></td>
    <td width="50"><strong>BILDER</strong></td>
  </tr>

Das sind keine Datenzellen ('td'), sondern http://de.selfhtml.org/html/tabellen/aufbau.htm@title=Kopfzellen ('th'). Und eigentlich gehören sie in den http://de.selfhtml.org/html/tabellen/aufbau.htm#kopf_koerper_fuss@title=Tabellenkopf 'thead'.

In Majuskeln spricht der Tod, nicht der HTML-Autor. Das ist gegenwärtig(!) gewünschte Darstellung – also Sache von CSS.

Ebenso Sache von CSS sind Tabellenrahmen und Spaltenbreiten. Die Breitenangabe für die Tabelle kann entfallen, sie ergibt sich aus den Spaltenbreiten.

Im Markup steht lediglich:

<table id="news">  
  <colgroup>  
    <col id="news-ID"/>  
    <col id="news-Datum"/>  
    <col id="news-Betreff"/>  
    <col id="news-Nachricht"/>  
    <col id="news-Bilder"/>  
  </colgroup>  
  <thead>  
    <tr>  
      <td width="16"><strong>ID</strong></td>  
      <td width="72"><strong>Datum</strong></td>  
      <td width="65"><strong>Betreff</strong></td>  
      <td width="169"><strong>Nachricht</strong></td>  
      <td width="50"><strong>Bilder</strong></td>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <td>1</td>  
      <td>01.01.2009</td>  
      <td>Test</td>  
      <td>Nachrichteninhalt</td>  
      <td>keine Bilder</td>  
    </tr>  
  </tbody>  
</table>

(XHTML-Syntax; in HTML ohne '/' am Ende der <col>-Tags.)

Im Stylesheet:

#news  
{  
  border: 1px solid black;  
}  
  
#news-ID  
{  
  width: 16px;  
}  
  
#news-Datum  
{  
  width: 72px;  
}  
  
#news-Betreff  
{  
  width: 65px;  
}  
  
#news-Nachricht  
{  
  width: 169px;  
}  
  
#news-Bilder  
{  
  width: 50px;  
}  
  
#news th  
{  
  font-weight: bold; /* könnte entfallen, da Browser-Default */  
  text-align: left;  /* Browser-Default ist center */  
  text-transform: uppercase;  
}

Qapla'