✔ Codeoptimierung

queicherius

queicherius

♥ PHP ♥
Hi, weiß jemand wie ich eine Tabelle wie im Anhang bekomme ohne folgendes Konstrukt verwenden zu müssen?

HTML: 
<table width="100%" cellpadding="3" border="0">

      <tbody>
        <tr>
          <td>
            <table width="100%" cellpadding="7" class="navi_row">
              <tbody>
                <tr>
                  <td class="c1">
                    <b>ID</b>

                  </td>
                  <td class="c2">
                    <b>Name</b>
                  </td>
                  <td class="c3">
                    <img alt="&auml;ndern" src="inc/img/edit.png">
                  </td>
                  <td class="c3">

                    <img alt="l&ouml;schen" src="inc/img/delete.png">
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
        <tr>
          <td>

            <table width="100%" cellpadding="7" class="navi_row">
              <tbody>
                <tr>
                  <td class="c1">
                    2
                  </td>
                  <td class="c2">
                    Normal
                  </td>
                  <td class="c3">

                    <a href="?action=edit&amp;id=2"><img alt="" src="inc/img/edit.png"> &auml;ndern</a>
                  </td>
                  <td class="c3">
                    <a onclick="javscript:return confirm('Wirklich l&ouml;schen?');" href="?action=del&amp;id=2"><img alt="" src="inc/img/delete.png"> l&ouml;schen</a>
                  </td>
                </tr>

              </tbody>
            </table>
          </td>
        </tr>
        <tr>
          <td>
            <table width="100%" cellpadding="7" class="navi_row">
              <tbody>
                <tr>

                  <td class="c1">
                    33
                  </td>
                  <td class="c2">
                    Standart
                  </td>
                  <td class="c3">
                    <a href="?action=edit&amp;id=33"><img alt="" src="inc/img/edit.png"> &auml;ndern</a>
                  </td>

                  <td class="c3">
                    <a onclick="javscript:return confirm('Wirklich l&ouml;schen?');" href="?action=del&amp;id=33"><img alt="" src="inc/img/delete.png"> l&ouml;schen</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>

        </tr>
        <tr>
          <td>
            <table width="100%" cellpadding="7" class="navi_row">
              <tbody>
                <tr>
                  <td class="c1">
                    34
                  </td>

                  <td class="c2">
                    Test
                  </td>
                  <td class="c3">
                    <a href="?action=edit&amp;id=34"><img alt="" src="inc/img/edit.png"> &auml;ndern</a>
                  </td>
                  <td class="c3">
                    <a onclick="javscript:return confirm('Wirklich l&ouml;schen?');" href="?action=del&amp;id=34"><img alt="" src="inc/img/delete.png"> l&ouml;schen</a>

                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
        <tr>
          <td>
            <table width="100%" cellpadding="7" class="navi_row">

              <tbody>
                <tr>
                  <td class="c1">
                    35
                  </td>
                  <td class="c2">
                    Test22222222
                  </td>
                  <td class="c3">
                    <a href="?action=edit&amp;id=35"><img alt="" src="inc/img/edit.png"> &auml;ndern</a>

                  </td>
                  <td class="c3">
                    <a onclick="javscript:return confirm('Wirklich l&ouml;schen?');" href="?action=del&amp;id=35"><img alt="" src="inc/img/delete.png"> l&ouml;schen</a>
                  </td>
                </tr>
              </tbody>
            </table>

          </td>
        </tr>
        <tr>
          <td>
            <table width="100%" cellpadding="7" class="navi_row">
              <tbody>
                <tr>
                  <td class="c1">
                    36
                  </td>

                  <td class="c2">
                    asd
                  </td>
                  <td class="c3">
                    <a href="?action=edit&amp;id=36"><img alt="" src="inc/img/edit.png"> &auml;ndern</a>
                  </td>
                  <td class="c3">
                    <a onclick="javscript:return confirm('Wirklich l&ouml;schen?');" href="?action=del&amp;id=36"><img alt="" src="inc/img/delete.png"> l&ouml;schen</a>

                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
        <tr>
          <td>
            <table width="100%" cellpadding="7" class="navi_row">

              <tbody>
                <tr>
                  <td class="c1">
                    37
                  </td>
                  <td class="c2">
                    asd
                  </td>
                  <td class="c3">
                    <a href="?action=edit&amp;id=37"><img alt="" src="inc/img/edit.png"> &auml;ndern</a>

                  </td>
                  <td class="c3">
                    <a onclick="javscript:return confirm('Wirklich l&ouml;schen?');" href="?action=del&amp;id=37"><img alt="" src="inc/img/delete.png"> l&ouml;schen</a>
                  </td>
                </tr>
              </tbody>
            </table>

          </td>
        </tr>
        <tr>
          <td>
            <table width="100%" cellpadding="7" class="navi_row">
              <tbody>
                <tr>
                  <td class="c1">
                    38
                  </td>

                  <td class="c2">
                    asd
                  </td>
                  <td class="c3">
                    <a href="?action=edit&amp;id=38"><img alt="" src="inc/img/edit.png"> &auml;ndern</a>
                  </td>
                  <td class="c3">
                    <a onclick="javscript:return confirm('Wirklich l&ouml;schen?');" href="?action=del&amp;id=38"><img alt="" src="inc/img/delete.png"> l&ouml;schen</a>

                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>

CSS: 
.navi_row {
border-color:#D5D5D5 -moz-use-text-color;
border-style:solid none;
border-width:1px 0;
}

Am liebsten was schlichtes :D
 

Anhänge

  • nicetable.jpg
    nicetable.jpg
    15 KB · Aufrufe: 41
Hallo,

eine solche Darstellung kannst du mit einer Tabelle und CSS auch recht einfach realisieren:

HTML: 
<table>
<tr>
<td>bla</td><td>bla2</td>
</tr>
<tr>
<td>bla</td><td>bla2</td>
</tr>
</table>

CSS:
Code: 
tr {
  border: 1px solid black; 
  margin: 10px;
  display:block;
}

table { 
  border-collapse: collapse;
}

wenn die Boxen rechts und links "offen" sein sollen, dann musst du statt dem was ich geschrieben habe halt border-top und border-bottom verwenden
 
queicherius hat gesagt.:
Gibts denn nix einfacheres als die Tabellen?
Zum Vergrößern anklicken....
Ich muss jetzt leider kurz Moralapostel spielen; man möge es mir verzeihen.

Es geht bei „tabellenlosem“ Webdesign nicht darum, Tabellen grundsätzlich zu verbannen. Tabellen sind nichts böses! Es geht vielmehr darum, Tabellen nicht als Gestaltungselement zu missbrauchen. In deinem Fall handelt es sich offensichtlich tatsächlich um tabellarische Daten, daher ist eine Tabelle auch die einzig vernünftige Lösung. Nach etwas einfacherem zu suchen, ergibt schlichtweg keinen Sinn.
 
Moin,
SilentWarrior hat gesagt.:
Ich muss jetzt leider kurz Moralapostel spielen; man möge es mir verzeihen.
Zum Vergrößern anklicken....
es gibt da in meinen Augen keinerlei Grund, dir deine Ausführung und Erläuterung krumm zu nehmen, denn sie bringt wunderbar diesen mittlerweile weit verbreiteten Irrglauben auf den Punkt, eine Website entspräche heute dem "Standard" bzw. wäre technisch auf der Höhe der Zeit, wenn sie ausschließlich mit CSS und <div>-Elementen aufgesetzt / entwickelt wird, die im HTML-Code semantisch keine sonderliche Rolle übernehmen, außer darin einen allgemeinen Blockbereich auszuzeichnen.

Oft genug hab ich hier im Forum (insbeondere drüben im CSS-Bereich) Quellcodes präsentiert bekommen, die immer wieder auf's Neue und in allen nur denkbaren Facetten dem Artikel Div Wahnsinn, Div Suppe oder Div Chaos. Wie kann man es vermeiden? weitere Nahrung liefern, wenn beispielsweise eine semantisch berechtigte Tabelle mit dem größtmöglichen Aufwand, und einem Hindernislauf gleichbedeutend, stattdessen mit <div>-Elementen und einer Prise CSS nachgebaut werden wollte, oder sich eine Überschrift in einem <div id="ueberschrift"> wiedergefunden hat, anstatt sie einfach mit dem semantisch gewichtigeren <h1-6>-Element auszuzeichnen.

Man kann bei der vermeintlichen "Codeoptimierung" auch schnell ins Hintertreffen geraten, und hat am Ende seinen Quellcode dann doch nur "verschlimmbessert" ;-)

mfg Maik
 
Gibts denn nix einfacheres als die Tabellen?
Zum Vergrößern anklicken....

Man bemerke den Plural :P

EDIT: Ich habe es letztendlich so gelöst, dass ich eine Liste habe, in jedem Listenpunkt ist eine Tabelle. Das hat den Vorteil, dass man die Tabellen beliebig einrücken kann...
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück