Text mittig vom Bild und Table Trennlinie entfernen oder Farbe ändern

[rejoin14]

Hallo,

ich bin noch sehr neu bei HTML und wurde direkt ins kalte Wasser geworfen, ich habe momentan 2 Probleme:
1. Möchte ich bei meiner Tabelle (s.u. Code und Bild) diese komischen Trennlinien entweder komplett rausnehmen oder sie einfach "unsichtbar" machen -> transparent oder hier in meinem Fall würde auch die Farbe: "Weiß" in Ordnung gehen.

2. Wie auf dem Bild zu erkennen ist, fängt mein Text immer auf der Höhe des Bildesmitte an, jedoch soll die Mitte vom Text, genau in der Mitte des Bildes sein.
Es soll nicht der Text in der Mitte des Bilders anfangen. (zur Verdeutlichung habe ich auch dazu ein Bild gemacht.

<table style="width: 200px; table-layout: fixed;" class="tr" border="0" rules="none">
    <tbody>
        <tr>
            <td class="tr" width="35">
                <p><img border="0" alt="" align="middle" src="images/2337.png" /></p>
            </td>

            <td class="tr">
                <p>Menubar</p>
            </td>
        </tr>

        <tr>
            <td class="tr">
                <p><img border="0" alt="" align="middle" src="images/2342.png" /></p>
            </td>

            <td class="tr">
                <p>Toolbar</p>
            </td>
        </tr>

        <tr>
            <td class="tr">
                <p><img border="0" alt="" align="middle" src="images/2357.png" /></p>
            </td>

            <td class="tr">
                <p>Devices</p>
            </td>
        </tr>

        <tr>
            <td class="tr">
                <p><img border="0" alt="" align="middle" src="images/2372.png" /></p>
            </td>

            <td class="tr">
                <p>Text View</p>
            </td>
        </tr>

        <tr>
            <td class="tr">
                <p><img border="0" alt="" align="middle" src="images/2381.png" /></p>
            </td>

            <td class="tr">
                <p>Image View</p>
            </td>
        </tr>

        <tr>
            <td class="tr">
                <p><img border="0" alt="" align="middle" src="images/2388.png" /></p>
            </td>

            <td class="tr">
                <p>Additional Information</p>
            </td>
        </tr>

        <tr>
            <td class="tr">
                <p><img border="0" alt="" align="middle" src="images/3174.png" /></p>
            </td>

            <td class="tr">
                <p>Quick Status View</p>
            </td>
        </tr>
    </tbody>
</table><br />
<br />

CSS-Datei:

.tr
{
    background:#FFFFFF;
    color:#000000;
}

Vielen Dank für Hilfe und Vorschläge.

 

[AzRaIL]

Deinen <td> Tags vertical-align:middle; geben in css.
Die Striche unten sind wahrscheinlich Border (mal im Browser untersuchen welches Element den Border hat, wahrscheinlich die <tr> )
border:0px; setzen in css.

Link wäre hilfreich.

 

[Tronjer]

Das ist der falsche Ansatz für die Aufgabe.

Statt einer Tabelle nimmt man hier eine <ul> und die Bilder können innerhalb der Listelemente entweder als source- oder background-images eingefügt werden. Wenn du anschließend den <li> noch dieselben Werte für height und line-height gibst, wird der Text auch vertikal zentriert.