WebSite X5Help Center

 
Frank D.
Frank D.
User

Html Code - Tabelle  de

Autore: Frank D.
Visite 993, Followers 1, Condiviso 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> 

Postato il
25 RISPOSTE
Daniel W.
Daniel W.
User
Utente del mese EN

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.

-----

Leggi di più
Postato il da Daniel W.
Frank D.
Frank D.
User
Autore

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

Leggi di più
Postato il da Frank D.
Andreas S.
Andreas S.
Moderator
Utente del mese 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!

Leggi di più
Postato il da 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.

Leggi di più
Postato il da Miguel Galarza
Frank D.
Frank D.
User
Autore

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

Leggi di più
Postato il da Frank D.
Daniel W.
Daniel W.
User
Utente del mese EN

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

Leggi di più
Postato il da Daniel W.
Frank D.
Frank D.
User
Autore

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!

Leggi di più
Postato il da Frank D.
Daniel W.
Daniel W.
User
Utente del mese EN

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.

-----

Leggi di più
Postato il da Daniel W.
Frank D.
Frank D.
User
Autore

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

Leggi di più
Postato il da Frank D.
Daniel W.
Daniel W.
User
Utente del mese EN

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

----- Screenshot -----

Leggi di più
Postato il da Daniel W.
Andreas S.
Andreas S.
Moderator
Utente del mese DE

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

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

Leggi di più
Postato il da Andreas S.
Daniel W.
Daniel W.
User
Utente del mese EN

@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

Leggi di più
Postato il da Daniel W.
Frank D.
Frank D.
User
Autore

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

Leggi di più
Postato il da 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.

Leggi di più
Postato il da Miguel Galarza
Frank D.
Frank D.
User
Autore

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

Leggi di più
Postato il da Frank D.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Daniel W.
Daniel W.
User
Utente del mese EN

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?

-----

Leggi di più
Postato il da Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Daniel W.
Daniel W.
User
Utente del mese EN

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.

Leggi di più
Postato il da Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Daniel W.
Daniel W.
User
Utente del mese EN

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.

Leggi di più
Postato il da Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

+  +  

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

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Daniel W.
Daniel W.
User
Utente del mese EN

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

Leggi di più
Postato il da Daniel W.