Html Code - Tabelle
Autor: Frank D.Hallo Leute, gerade zweifel ich ein wenig an meinem Verstand. Ich habe im Shop, bei den Produkten unter Details eine Tabelle eingefügt. Wunderbar, klappt. Doch obwohl ich im Code border="0" stehen habe, wird ein Tabellenrahmen angezeigt. Ich habe sogar, nur um es zu testen, unter Schritt 2, den Rahmen für die Felder auf 0 gestellt.
Warum zur Hölle geht das nicht? Ich schreibe den Code mal hier rein. Vielleicht kann das einer von euch mal testen, ob auch ein Rahmen angezeigt wird und vielleicht weiß jemand einen Rat oder Trick?!!?
Danke euch im Voraus...
</p>
<table border="0" width="100%">
<tr>
<td width="105"><font size="4">Format:</font></td>
<td><font size="4">MP4</font></td>
</tr>
<tr>
<td width="105"><font size="4">Auflösung:</font></td>
<td>5760 x 2880</td>
</tr>
<tr>
<td width="105"><font size="4">Größe:</font></td>
<td>1,64 GB</td>
</tr>
<tr>
<td width="105"><font size="4">Länge:</font></td>
<td>06:22 Min.</td>
</tr>
<tr>
<td width="105">Framerate:</td>
<td>59,94 fps</td>
</tr>
</table>
<br>
<form>
<input type="button" value="Wieder zurück" onclick="history.back()">
</form>
<br>
<hr>
Eine Lösung für <table> und border="0" habe ich nicht gefunden.
Aber für kleine Tabellen genügen auch Leerzeichen oder Punkte als Füllzeichen.
-----
Autor
Sicher geht das auch aber "sieht ordentlich aus" ist was anderes!
Also da sollte Inco eingreifen und die Möglichkeit schaffen, in den Detailbereich eine Tabelle mit einzubauen. Es heißt "Details" und die bestehen nicht immer nur aus Texten oder Bildern
KAnnst du uns mal zeigen wie es Online aussieht?
Ich nehme an WSX5 hat irgendwo Tabellen Styles verwendet, die auch hier sich auswirken! Auch wenn du border 0 eingegeben hast, wird das nichts nützen!
Wenn ich es richtig verstanden habe, möchten Sie NICHT den Rand der Zeilen und Spalten anzeigen?
Dazu müsste man den Rand per CSS auf transparent setzen.
Ich habe den Tabellencode verbessert. Es würde so aussehen:
Ich verstehe die Funktionalität des Formulars und des Eingabe-Tags in Ihrer Tabelle nicht. Wenn es sich nur um einen Link-Button handelt, habe ich ihn anders platziert, genauso wie bei CSS.
Der CSS-Code: Dieser wird in SCHRITT 1 – STATISTIKEN UND CODE – CODE (BEVOR SIE DEN HEAD-TAG SCHLIESSEN) platziert, WENN SIE VIELE TABELLEN AUF VERSCHIEDENEN SEITEN IHRER WEBSITE VERWENDEN vorhaben.
<style>
.table1 {
width: 100%;
height: auto;
border: 1px solid transparent !important;
padding: 5px;
}
.table1 caption {
caption-side: top;
text-align: center;
}
.table1 th {
border: 1px solid transparent !important;
padding: 5px;
background: #F0F0F0;
text-align: left;
}
.table1 td {
border: 1px solid transparent !important;
padding: 5px;
}
.button {
width: auto;
height: auto;
background-color: #3f7d95;
border: solid 0px #ffffff;
color: #ffffff;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
margin: 4px;
cursor: pointer;
border-radius: 3px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.8s;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 6px 1px rgba(0,0,0,0.2);
min-width: 200px;
max-width: 320px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.button5 {
background-color: #23a2ab;
}
.container {
height: 50px;
position: relative;
border-bottom: 1px solid transparent !important;
}
.center {
margin: 0;
position: relative;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
DIE TABELLE: DIESE WIRD IN EINEM TEXTOBJEKT (IN DEN PRODUKTFUNKTIONEN) ODER IN EINEM HTML-OBJEKT PLATZIERT
<table class="table1">
<caption>INFO</caption>
<thead>
<tr>
<th width="33%">Format:</th>
<th>MP4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Auflösung:</td>
<td>5760 x 2880</td>
</tr>
<tr>
<td>Größe:</td>
<td>1,64 GB</td>
</tr>
<tr>
<td>Länge:</td>
<td>06:22 min.</td>
</tr>
<tr>
<td>Framerate:</td>
<td>59,94 fps</td>
</tr>
<tbody>
</table>
<hr style="border: 1px solid #e6e6e6;">
<div class="container">
<a class="button button5 center" value="Wieder zurück" onclick="history.back()">Wieder zurück</a>
</div>
WICHTIG: Vergessen Sie nicht, dass das Textobjekt nicht zum Platzieren von Code geeignet ist, da eine einfache Änderung den Code beschädigen würde. (Aber das lässt sich beheben, indem man den gesamten Text im Code auswählt, die Schriftart ändert und „erneut“ zur verwendeten Schriftart zurückkehrt.)
Ich hoffe, das ist nützlich. Grüße.
Autor
@Andreas - Würde ich aber die Seite ist noch nicht online. Läuft nur bei mir auf dem Synoloy NAS Server.
@Miguel Galarza - Danke für die Mühe, werd ich gleich einmal testen!
Habe den Code von Miguel Galarza mal bei Details einfügt und das HTML-Symbol markiert. Die Tabelle hat weiterhin schwarze Ränder um jeder Zelle und einen Riesenanstand durch den CSS-Code.
Dann doch besser meinen Vorschlag mit Leerzeichen verwenden, das geht einfach und schnell bei kleinen Tabellen, die nicht auf Smartphones umgebrochen werden.
----- Code von Miguel Galarza und das Ergebnis -----
Autor
Nichts zu machen, der Rahmen ist nach wie vor sichtbar.
Es dreht sich dabei nicht um eine x-beliege Seite oder Seiten im Projekt sondern nur um die Ansicht auf der Produktseite. Deren Inhalt wird im Produkt unter Details bestimmt. Nicht in der Produktbeschreibung soll diese Tabelle sichtbar sein sondern in den Details!
Ausserdem müsste der CSS- und HTML-Code in einer einzigen endlos lange Zeile sein, damit es keinen Riesenabstand zu den anderen Inhahlten bei "Details" gibt, also so oder so unpraktikabel.
-----
Autor
Ich lasse es erst einmal. Soll Inco mal aktiv werden. Entweder geht HTML richtig odergar nicht. Geht nur so halb ist murcks.
Für alle User, denen "nur so halb" genügt, gibt es die kleinen Pseudo-Tabellen, siehe Screenshot
Nebenbei erwähnt:
Für richtige Speisekarten auf Webseiten gibt es die "Dot leaders" (führende Punkte), siehe Post
>> https://helpcenter.websitex5.com/pl/post/252718
----- Screenshot -----
Versuche mal die erste Zeile von deinem Code so zu schreiben...
<tablestyle="border: 0px solid transparent" width="100%">
@Andreas S.: Hier meine Testseite mit der HTML-Tabelle auf "transparent" - nützt auch nichts - vielleicht kann mit dem Browser-Tool mal getestet werden auf welche CSS-Änderungen die Tabelle reagiert.
>> http://finde-links.de/123shop-hosteurope/product/?book-7
Autor
Daniel hat leider recht, kein Erfolg.
Zum verrückt werden, gibts doch nicht!!!!!
Ok, sie wollen es in die Produktbeschreibung aufnehmen.
dann muss die Tabelle innerhalb eines div platziert werden.
Und ich habe den Container geändert, er stört wahrscheinlich den Programmcontainer oder es gibt zusätzlichen Code, der stört.
CSS-Code sieht so aus: SCHRITT 1 – STATISTIKEN UND CODE – CODE (BEVOR SIE DEN HEAD-TAG SCHLIESSEN)
<style>
.table1 {
width: 100%;
height: auto;
border: 1px solid transparent !important;
padding: 5px;
}
.table1 caption {
caption-side: top;
text-align: center;
}
.table1 th {
border: 1px solid transparent !important;
padding: 5px;
background: #F0F0F0;
text-align: left;
}
.table1 td {
border: 1px solid transparent !important;
padding: 5px;
}
.button {
width: auto;
height: auto;
background-color: #3f7d95;
border: solid 0px #ffffff;
color: #ffffff;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
margin: 4px;
cursor: pointer;
border-radius: 3px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.8s;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 6px 1px rgba(0,0,0,0.2);
min-width: 200px;
max-width: 320px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.button5 {
background-color: #23a2ab;
}
.container1 {
height: 60px;
position: relative;
border-bottom: 1px solid transparent !important;
}
.center {
margin: 0;
position: relative;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
Die Tabelle sieht so aus: (Ich habe den Text mit dem Code linksbündig)
<div>
<table class="table1">
<caption>INFO</caption>
<thead>
<tr>
<th width="33%">Format:</th>
<th>MP4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Auflösung:</td>
<td>5760 x 2880</td>
</tr>
<tr>
<td>Größe:</td>
<td>1,64 GB</td>
</tr>
<tr>
<td>Länge:</td>
<td>06:22 min.</td>
</tr>
<tr>
<td>Framerate:</td>
<td>59,94 fps</td>
</tr>
<tbody>
</table>
<hr style="border: 1px solid #e6e6e6;">
<div class="container1">
<a class="button button5 center" value="Wieder zurück" onclick="history.back()">Wieder zurück</a>
</div>
</div>
und es sieht so aus:
Wie ich im vorherigen Kommentar sagte: Eine einfache Bearbeitung und der Code geht kaputt. Aber es gibt eine Lösung.
Ich weiß nicht genau, wie er es will. Aber wenn es nicht so aussieht wie bei mir, stört etwas den benutzerdefinierten Code.
Der Haken liegt nicht. Wenn es in meinem Programm randlos aussieht, sollte es in allen gleich aussehen. Code ist Code.
Autor
BINGO - der verdammte Rahmen ist weg. Vielen, vielen Dank
x Frank D., ... Ihr Code aus Ihrem ersten Beitrag funktioniert gut und korrekt, es gibt keinen Rand, außer dem grauen am unteren Rand des <hr>-Tags ...
... der einzige Fehler besteht darin, dass das anfängliche </p>-Tag gelöscht werden soll...
...um Ihr Problem nachvollziehen zu können, sollten Sie den LINK zu Ihrer betreffenden Seite posten...
.
Ein kleiner bzw. großer Wermutstropfen ist der große Abstand durch den HTML-Code, siehe
Meine Testseite >> http://finde-links.de/123shop-hosteurope/product/?book-8
Der Tabellen-HTML-Code müsste ohne Zeilenumbrüche sein, damit der Abstand kleiner wird.
Gibt es dafür auch eine Code-Lösung bzw. ein Programm, um Zeilenumbrüche zu entfernen?
-----
ciao Daniel, ... ... ... NEIN! ...
... bekanntlich muss der HTML-Code, der mit der Schaltfläche „HTML-Code aktivieren“ [</>] in ein Textobjekt eingefügt wird, aus einer einzigen fortlaufenden Codezeichenfolge ohne Wagenrücklauf bestehen …
... praktisch so:
<table border="0" width="100%"> <tr> <td width="105"><font size="4">Format:</font></td> <td><font size="4">MP4</font></td> </tr> <tr> <td width="105"><font size="4">Auflösung:</font></td> <td>5760 x 2880</td> </tr> <tr> <td width="105"><font size="4">Größe:</font></td> <td>1,64 GB</td> </tr> <tr> <td width="105"><font size="4">Länge:</font></td> <td>06:22 Min.</td> </tr> <tr> <td width="105">Framerate:</td> <td>59,94 fps</td> </tr> </table> <br> <form> <input type="button" value="Wieder zurück" onclick="history.back()">
</form>
.
ciao
.
... wenn Sie stattdessen die aktuelle Situation online regulieren möchten, ... fügen Sie im Abschnitt /HEAD, dritte (3) Option, diesen Code von mir ein:
<script>
$( document ).ready(function() {//K>;
setTimeout(function(){//K1>
$("#details_tab0 br").hide()
}, 2000); //K1<<;
}); //K<<;
</script>
.
Danke - es hat geklappt.
.
Kleine Anleitung:
Bei WebSite X5 unter ...
1 Einstellungen > Statistiken und Code / Code
Benutzerdefinierter Code:
Vor dem </HEAD>-Tag
... den Javascript-Code (siehe im Post darüber) einfügen.
ciao Daniel, ...Ich habe Ihr Beispiel gesehen und OK...es funktioniert...
... aber ich würde Sie um einen Gefallen bitten, wenn es Ihnen möglich wäre, denn ich habe keinen PC und ich habe nicht das Programm, um die Tests durchzuführen ...
... wenn Sie können, sollten Sie den Tabellencode aus meinem vorherigen Beitrag in einer einzelnen Zeichenfolge ausprobieren, ohne den <script>-Code ...
... wenn ja, danke ich Ihnen schon jetzt ...
Ich habe jetzt den HTML-Code für die Tabelle ohne Zeilenumbrüche und ohne Javascript-Code auf meiner Testseite im Shop bei Produktdetails eingefügt, siehe
>> http://finde-links.de/123shop-hosteurope/product/?book-8
Es gibt keinen großen Abstand mehr.
Ich hatte zuvor schon einmal manuell die Zeilenümbrüche entfernt, aber meine Frage war, ob man das nicht einfacher und schneller mit Code oder einem Programm machen könnte.
Aber ohne den CSS-Code von Miguel Galarza und ohne ID für <table> gibt es schwarze Ränder.
ciao, ...vielen Dank für den Test...
+ +
<style> table * { border: 0px !important;}</style>
.
Meine Tests gerade eben haben gezeigt, dass der CSS-Code unbedingt bei ...
3 Sitemap
Spezialseiten
Onlineshop: Produktseite<--- markieren, oben auf "Eigenschaften" und "Erweitert" klicken
Benutzerdefinierte Code:
Vor dem </HEAD>-Tag
<style> table * { border: 0px !important;}</style>
... eingefügt werden muss, damit er auch funktioniert.
Wird der CSS-Code dagegen oben im Menü bei der Seite mit dem Produktkatalog eingefügt, dann funktioniert er nicht, das war auch mein Fehler bei den vorherigen Versuchen.
----- Testseite Screenshot (Code übernimmt Formatierung fett/kursiv) -----
Auch bei den Trennlinien im Shop, die auf Nutzerwunsch entfernt werden sollten, war das richtige Einfügen des Codes wichtig, siehe
>> https://helpcenter.websitex5.com/pl/post/262523