Frage Tabelle erstellen

[Paul01]

Hallo Zusamme,

eben registriert & schon ne Frage.

Ich hab folgende Tabelle:

Spoiler: Code

<table cellpadding="0">
<tbody>
<tr height="10">
                                    <td width="10px">
                                    </td>
                                    <td width="400px">
zeile 1 spalte 1
                                    </td>
                                    <td valign="top">
                                      zeile 1 spalte 2
                                    </td>
                                    <td width="500px" valign="top">
                                       zeile 3 spalte 3
                                    </td>
                                </tr>

                                <tr height="20">
                                    <td colspan="3">

                                    </td>
                                </tr>

                                <tr height="10">
                                    <td width="10px">
                                    </td>
                                    <td colspan="3">
zeile 2 zusammenschluss
                                    </td>


                                </tr>
                                <tr height="30">
                                    <td colspan="3">

                                    </td>
                                </tr>
                                <tr>
                                    <td width="10px">

                                    </td>
                                    <td >
                                        zeile 3 spalte 1
                                    </td>
                                    <td width="20px">
                                         zeile 3 spalte 2
                                    </td>
                                    <td width="20px">

                                    </td>
                                </tr>
                                <tr height="50">
                                    <td colspan="3">

                                    </td>
                                </tr>
                                <tr>
                                    <td width="10px">

                                    </td>
                                    <td >
                                    zeile 4 spalte 1
                                    </td>

                                    <td >
                                       zeile 3/4 spalte 2
                                    </td>
                                    <td >

                                    </td>

                                </tr>

                                <tr >
                                    <td width="10px">

                                    </td>
                                    <td >
                                        noch nicht gemacht
                                    </td>

                                    <td >
                                       noch nicht gemacht
                                    </td>
                                    <td >

                                    </td>

                                </tr>

                                <tr>
                                    <td width="10px">

                                    </td>
                                    <td >
                                        noch nicht gemacht
                                    </td>

                                    <td>
                                        noch nicht gemacht
                                    </td>
                                    <td >

                                    </td>

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

Die soll am Ende so aussehen:


Ziel ist es damit einzele Textboxen zu positionieren.

Ich häng derzeit an der dritten Zeile. Das orentiert sich oben an der ersten Spalte, zweite Zeile, soll aber weiter nach rechts.


Kann mir da jemand helfen? Komm einfach nicht weiter.

PS: Könnte man mit padding machen, ist aber glaub nicht so die ideale Art oder?

 

[scbawik]

Hallo Zusamme,

eben registriert & schon ne Frage.

Ich hab folgende Tabelle:

Spoiler: Code

<table cellpadding="0">
<tbody>
<tr height="10">
                                    <td width="10px">
                                    </td>
                                    <td width="400px">
zeile 1 spalte 1
                                    </td>
                                    <td valign="top">
                                      zeile 1 spalte 2
                                    </td>
                                    <td width="500px" valign="top">
                                       zeile 3 spalte 3
                                    </td>
                                </tr>

                                <tr height="20">
                                    <td colspan="3">

                                    </td>
                                </tr>

                                <tr height="10">
                                    <td width="10px">
                                    </td>
                                    <td colspan="3">
zeile 2 zusammenschluss
                                    </td>


                                </tr>
                                <tr height="30">
                                    <td colspan="3">

                                    </td>
                                </tr>
                                <tr>
                                    <td width="10px">

                                    </td>
                                    <td >
                                        zeile 3 spalte 1
                                    </td>
                                    <td width="20px">
                                         zeile 3 spalte 2
                                    </td>
                                    <td width="20px">

                                    </td>
                                </tr>
                                <tr height="50">
                                    <td colspan="3">

                                    </td>
                                </tr>
                                <tr>
                                    <td width="10px">

                                    </td>
                                    <td >
                                    zeile 4 spalte 1
                                    </td>

                                    <td >
                                       zeile 3/4 spalte 2
                                    </td>
                                    <td >

                                    </td>

                                </tr>

                                <tr >
                                    <td width="10px">

                                    </td>
                                    <td >
                                        noch nicht gemacht
                                    </td>

                                    <td >
                                       noch nicht gemacht
                                    </td>
                                    <td >

                                    </td>

                                </tr>

                                <tr>
                                    <td width="10px">

                                    </td>
                                    <td >
                                        noch nicht gemacht
                                    </td>

                                    <td>
                                        noch nicht gemacht
                                    </td>
                                    <td >

                                    </td>

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

Die soll am Ende so aussehen:


Ziel ist es damit einzele Textboxen zu positionieren.

Ich häng derzeit an der dritten Zeile. Das orentiert sich oben an der ersten Spalte, zweite Zeile, soll aber weiter nach rechts.


Kann mir da jemand helfen? Komm einfach nicht weiter.

PS: Könnte man mit padding machen, ist aber glaub nicht so die ideale Art oder?

Statt 3 Spalten, 6 Spalten.
1. Reihe hat dann je Spalte colspan 2

 

[MrMurphy]

Hallo

Da du keine Tabellendaten hast ist das table-Element grundsätzlich falsch.

HTML-Elemente dürfen nicht nach ihrem Aussehen gewählt werden, sondern dürfen nur nach ihrem Inhalt gewält werden.

So eine Darstellung wäre ein Fall für das CSS-Grid, welches aber noch nicht ausreichend für den praktischen Einsatz von der Browsern unterstützt wird.

Deshalb schlage ich den Einsatz von passenden Containern mit Flexbox vor.

Gruss

MrMurphy

 

[Sailor]

Ja... allerdings wird Flexbox auch noch nicht durchgängig unterstützt. es wäre deshalb anzuraten, zu den Flexbox Formatierungen immer ein passendes Fallback einzubauen!
http://maddesigns.de/flexbox-fallbacks-2670.html

 

[MrMurphy]

Hallo

Die Zeiten sind schon lange vorbei. Ich finde es schade das mit solchen veralteten Informationen immer noch von Flexbox abgeraten wird.

Gruss

MrMurphy

 

[Paul01]

Ich schau mir mal flexbox an, sagt mir überhaupt nichts :)
Danke euch

 

[Sailor]

@MrMurphy
Ich habe keineswegs von Flexbox abgeraten... oder was ist an

Ja...

falsch zu interpretieren?
Und die Informationen sind erst dann veraltet, wenn es keine veralteten Browser mehr im Netz gibt.
https://caniuse.com/#feat=flexbox
selbst der neueste IE Browser (IE11) hat noch Schwierigkeiten - von den älteren Versionen ganz zu schweigen.

 

[MrMurphy]

Hallo

Ich habe keineswegs von Flexbox abgeraten... oder was ist an ... falsch zu interpretieren?

Das "allerdings", welches du in deinem Zitat unterschlagen hast.

Damit kehrst du das "ja" fast ins Gegenteil um.

Und das

selbst der neueste IE Browser (IE11) hat noch Schwierigkeiten

stimmt überhaupt nicht. Nach der Logik kann man CSS3 nie verwenden. Der IE ist bereits seit Jahren offiziell begraben, der offizielle Nachfolger ist Edge. Einen neuen Internet Explorder wird nie geben.

Und bei der Verbreitung

Windows 10 = 0,17%
Windows 9 = 0,16%
Windows 8 = 0,3%

zusammen also 0,63%

ist es schlicht unsinnig die überhaupt noch unterstützen zu wollen. Wobei Windows 11 letztmalig mit Windows XP ausgeliefert wurde, alle Nachfolger haben Edge mit auf den Weg bekommen.

Bei "Showing All" in der Can I Use-Übersicht ist die bereits seit Jahren sehr gute Browserunterstützung für Flexbox wohl kaum noch zu leugnen. Vor vielen anderen CSS3-Möglichkeiten, die deutlich schlechter unterstützt werden, wird komischerweise nicht "gewarnt".

Gruss

MrMurphy

 

[Sailor]

@MrMurphy
.. ach lass uns doch hier nicht über Dinge diskutieren, die wir eh nicht ändern können - interessiert wahrscheinlich außer uns auch keinen. Das sollten wir höchstens mal bei einem gemütlichen Bierchen an der Theke machen.
Solange im Server Log meines Providers noch Browser Typ 'alt' auftauchen (das sind zur Zeit schwankend zwischen 6 - 8% / habe ich gerade eben nochmal geprüft) werde ich bei CSS3 Formaten, von denen ich weiß, dass sie Schwierigkeiten verursachen können, weiterhin mit 'webkits' und Fallbacks arbeiten, um so gut es eben geht auch die Altlasten zu unterstützen.
Wenn du das nicht machst, ist auch ok - jeder hat eben seine eigene Arbeitsweise.

 

[MrMurphy]

Hallo

Ich habe mal zum Ausprobieren eine Testdatei erstellt, wie ich mir die Tabellendarstellung mit einfachen Inhalten vorstelle:

http://boratb.bplaced.net/index78.html

Gruss

MrMurphy