WebSite X5Help Center

 
Frank D.
Frank D.
User

Html Code - Tabelle  de

Auteur : Frank D.
Visité 1110, Followers 1, Partagé 0  

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> 

Posté le
25 RéPONSES
Daniel W.
Daniel W.
User

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.

-----

Lire plus
Posté le de Daniel W.
Frank D.
Frank D.
User
Auteur

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

Lire plus
Posté le de Frank D.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

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!

Lire plus
Posté le de Andreas S.
Miguel Galarza
Miguel Galarza
User

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.

Lire plus
Posté le de Miguel Galarza
Frank D.
Frank D.
User
Auteur

@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!

Lire plus
Posté le de Frank D.
Daniel W.
Daniel W.
User

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 -----

Lire plus
Posté le de Daniel W.
Frank D.
Frank D.
User
Auteur

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!

Lire plus
Posté le de Frank D.
Daniel W.
Daniel W.
User

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.

-----

Lire plus
Posté le de Daniel W.
Frank D.
Frank D.
User
Auteur

Ich lasse es erst einmal. Soll Inco mal aktiv werden. Entweder geht HTML richtig odergar nicht. Geht nur so halb ist murcks.

Lire plus
Posté le de Frank D.
Daniel W.
Daniel W.
User

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/fr/post/252718

----- Screenshot -----

Lire plus
Posté le de Daniel W.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Versuche mal die erste Zeile von deinem Code so zu schreiben...

<tablestyle="border: 0px solid transparent" width="100%">

Lire plus
Posté le de Andreas S.
Daniel W.
Daniel W.
User

@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

Lire plus
Posté le de Daniel W.
Frank D.
Frank D.
User
Auteur

Daniel hat leider recht, kein Erfolg.
Zum verrückt werden, gibts doch nicht!!!!!

Lire plus
Posté le de Frank D.
Miguel Galarza
Miguel Galarza
User

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.

Lire plus
Posté le de Miguel Galarza
Frank D.
Frank D.
User
Auteur

BINGO - der verdammte Rahmen ist weg. Vielen, vielen Dank wink

Lire plus
Posté le de Frank D.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

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...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Daniel W.
Daniel W.
User

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?

-----

Lire plus
Posté le de Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

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

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... 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>

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Daniel W.
Daniel W.
User

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.

Lire plus
Posté le de Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

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 ...

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Daniel W.
Daniel W.
User

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.

Lire plus
Posté le de Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

ciao, ...vielen Dank für den Test...

+  +  

<style> table * { border: 0px !important;}</style>

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Daniel W.
Daniel W.
User

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) -----

Lire plus
Posté le de Daniel W.