• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[XHTML] Tabelle zentrieren

R

Rayse

Mitglied
Ich habe nun seit gestern das Web durchwühlt aber keine eindeutige Antwort finden können. Wie center ich eine Tabelle? In xhtml ist das meiste was mit center zu tun hat ja nicht mehr gewünscht, hier erstmal mein derzeitiger Quellcode:

HTML: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Testseite Alpha v0.1</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color:grey">
    
    <h1><b>Test Site Alpha Project "XHTML" v0.1</b></h1>

<table border="1" width="1000">
    
    <tr>
        <td>
            
            <table border="1" width="250">
                <tr>
                    <td>
                        Home
                    </td>
                </tr>
                <tr>
                    <td>
                        FAQ
                    </td>
                </tr>
                <tr>
                    <td>
                        About Us
                    </td>
                </tr>
            </table>
            
        </td>
    </tr>   
    
</table>
    
</body>
</html>
Wie krieg ich nun die erste Tabelle die direkt unter dem Titel ist, dazu in der Mitte der Website angezeigt zu werden?

Dazu muss ich sagen das ich mich erst seit kurzem mit XHTML beschäftige und quasi noch im Lernprozess bin.

Danke schonmal und Gruß

Rayse
 
Werbung:
Natürlich per CSS:

Code: 
margin: 0px auto;

Allerdings missbrauchst Du Tabellen. Wenn Du schon xhtml verwenden willst, so beachte auch die semantische Bedeutung der HTML-Elemente. Tabellen sind nur dafür da tabellarische Informationen darzustellen. Du missbrauchst sie jedoch für das Design, den Grundaufbau der Seite. Das ist der falsche Weg.
 
Danke erstmal. Ich dachte sämtlicher Content einer Website wird in Form von Tabellen dargestellt. Jedenfalls sehe ich es bei vielen Websiten wenn ich mir die Quelltexte anschaue.

Ich selbst wüsste jetzt auch keinen anderen Lösungsansatz um die Grundstruktur einer Website einzurichten.

Gruß

Rayse
 
Werbung:
Nein, das ist ein Irrglaube der leider noch weit verbreitet ist. Tabellen werden wie gesagt auch nur für tabellarische Daten verwendet. Nicht als Grundgerüst einer Webseite. Dieses wird mit HTML kodiert und mit CSS gestaltet. Das wäre der normale, modernste und sicherste Weg. Schau Dir mal aktuelle Tutorials an und übe etwas, dann klappt es auch ohne Tabellen - sogar viel einfacher als mit Tabellen.
 
Ok, ich habe mich weiter mit HTML beschäftigt und bin zu folgendem Lösungsansatz gekommen. Vielleicht kann mir einer sagen ob der besser ist oder was Verbesserungswürdig ist.

Quellcode:

HTML: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test Site v0.1</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    
    <h1>Test Site v1.0</h1>
    
    
    <div id="navi">
    <p><b>Navigation Links</b></p>
    <p>Home</p>
    <p>FAQ</p>
    <p>About Us</p>
    </div>
    
    <div id="content">
    <p>CONTENT</p>
    </div>
    
</body>
</html>
CSS:
HTML: 
body {
    background: #8C8C8C;
    height: 800px;
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 10px;
    margin-left: 50px;
    border-width: medium;
    border-style: solid;
    border-color: black;
    
}

h1 {
    text-align: center;
    text-decoration: underline;
    color: blue;
}

#navi {
    width: 10%;
    height: 400px;
    float: left;
    border-width: medium;
    border-style: solid;
    border-color: black;
    padding-left: 10px;
}

#content {
    width: 75%;
    height: 400px;
    margin-left: 200px;
    border-width: medium;
    border-style: solid;
    padding-left: 10px;
}
 
Besser ist es ja. Zumindest vom Code her. Ob Du damit dein gewünschtes Design erreichst weiß ich natürlich nicht.

Kleiner Tipp: ein Menü wie Du es bei der ID "navi" darstellst sollte man als ul-Liste implementieren.
 
Werbung:
Besser ist es, aber noch ein Stück weit weg von richtigem HTML. Schlage nach, was man unter dem Begriff "Semantik" versteht - das ist nämlich der Sinn von HTML.

Du hast in Deinem Code ein Menü, zeichnest es aber als einzelne Textabsätze aus. Das ist unlogisch und semantisch falsch. Ein Menü ist eine Auflistung von Menüpunkten (Links), also zeichne es auch als Liste aus.
Das Tag <div> ist übrigens dazu da, mehrere Elemente zu einer logischen Gruppe zusammenzufügen. Deine beiden <div>s sind überflüssig, weil das erste durch eine Liste ersetzt wird, und das zweite enthält nur ein Element - das ist aber keine Gruppe.
Außerdem benutzt Du noch <b>, das keine semantische Bedeutung hat, sondern für die physische Inhaltsauszeichnung da ist. Daher benutzt man es nicht mehr. Wenn Du etwas fett darstellen willst, nutze dazu CSS. Wenn Du dem Inhalt aber eine semantische Bedeutung mit dem "fett" geben willst, dann nutze <em> oder <strong>, um den Inhalt als *wichtig* bzw. *sehr wichtig* auszuzeichnen oder nutze eines der Überschriftstags (<h1> bis <h6>, auf die Ordnung achten!), um es als Überschrift auszuzeichnen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben