Text Alignment in Table - not working

Diskutiere Text Alignment in Table - not working im HTML Forum im Bereich Programmierung; Folgendes Problem - ich möchte den Text innerhalb der Zelle zentrieren und die Tabelle selber zentriert haben. Wenn ich das Skript online teste...
Neues Thema erstellen Antworten
Diskutiere Text Alignment in Table - not working im HTML Forum im Bereich Programmierung; Folgendes Problem - ich möchte den Text innerhalb der Zelle zentrieren und die Tabelle selber zentriert haben. Wenn ich das Skript online teste...
Neues Thema erstellen Antworten
S

SK96

New member
Beiträge
2
Punkte Reaktionen
0
Folgendes Problem - ich möchte den Text innerhalb der Zelle zentrieren und die Tabelle selber zentriert haben. Wenn ich das Skript online teste funktioniert es. Binde ich den HTML Code auf der Website ein, dann wird dies nicht richtig angezeigt und der Text ist rechts angeordnet, statt mittig. Die Tabelle selber ist zentriert, das klappt.
Jemand eine Idee woran das liegen könnte ?


HTML: 
<html>
<table class="offnungszeiten">
<head>
<style>

offnungszeiten {
  border-collapse: collapse;
  width: 70%;
  text-align: center;
}

table,td,tr  {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
   background: #FFFFFF
}




tr:hover {background-color: #5db7e1;}
</style>
</head>
<tbody>
<tr>
<td>Montag:</td>
<td>Ruhetag</td>
</tr>
<tr>
<td>Dienstag :</td>
<td>16.00 - 22.00 Uhr</td>
</tr>
<tr>
<td>Mittwoch:</td>
<td>16.00 - 22.00 Uhr</td>
</tr>
<tr>
<td>Donnerstag:</td>
<td>16.00 - 22.00 Uhr</td>
</tr>
<tr>
<td>Freitag:</td>
<td>16.00 - 22.00 Uhr</td>
</tr>
<tr>
<td>Samstag:</td>
<td>16.00 - 23.00 Uhr</td>
</tr>
<tr>
<td>Sonntag:</td>
<td>11.30 - 14.00 Uhr & 16.00 - 23.00 Uhr </td>
</tr>

</tbody>
</table>
</html>
 

Anhänge

  • WB1.PNG
    WB1.PNG
    56,5 KB · Aufrufe: 4
  • WB2.PNG
    WB2.PNG
    37,9 KB · Aufrufe: 4
S

SK96

New member
Beiträge
2
Punkte Reaktionen
0
scatello schrieb:
Da fehlt https://www.w3schools.com/tags/tag_body.asp
Zum Vergrößern anklicken....
Das hat leider nichts gebracht. Die einzige Lösung die ich jetzt gefunden habe ist dieser Einzeiler VOR JEDEM <td> Element.

Code: 
<body>

<tr>
<td style="text-align: center; vertical-align: middle;">
Montag:</td>
<td style="text-align: center; vertical-align: middle;">
Ruhetag</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
Dienstag :</td>
<td style="text-align: center; vertical-align: middle;">
16.00 - 22.00 Uhr</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
Mittwoch:</td>
<td style="text-align: center; vertical-align: middle;">
16.00 - 22.00 Uhr</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
Donnerstag:</td>
<td style="text-align: center; vertical-align: middle;">
16.00 - 22.00 Uhr</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
Freitag:</td>
<td style="text-align: center; vertical-align: middle;">
16.00 - 22.00 Uhr</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
Samstag:</td>
<td style="text-align: center; vertical-align: middle;">
16.00 - 23.00 Uhr</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
Sonntag:</td>
<td style="text-align: center; vertical-align: middle;">
11.30 - 14.00 Uhr & 16.00 - 23.00 Uhr </td>
</tr>
</table>
</body>


mit

td {
text-align: center;
vertical-align: middle;
}

funktioniert es nämlich nicht.
 
S

scatello

Well-known member
Beiträge
390
Punkte Reaktionen
31
HTML: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Öffnungszeiten</title>
    <style>
     .offnungszeiten {
       border-collapse: collapse;
       width: 70%;
       margin: 0 auto;
     }

table,td,tr  {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
   background: #FFFFFF
}
tr:hover {background-color: #5db7e1;}
</style>
</head>
<body>
<table class="offnungszeiten"> 
<tbody>
<tr>
<td>Montag:</td>
<td>Ruhetag</td>
</tr>
<tr>
<td>Dienstag :</td>
<td>16.00 - 22.00 Uhr</td>
</tr>
<tr>
<td>Mittwoch:</td>
<td>16.00 - 22.00 Uhr</td>
</tr>
<tr>
<td>Donnerstag:</td>
<td>16.00 - 22.00 Uhr</td>
</tr>
<tr>
<td>Freitag:</td>
<td>16.00 - 22.00 Uhr</td>
</tr>
<tr>
<td>Samstag:</td>
<td>16.00 - 23.00 Uhr</td>
</tr>
<tr>
<td>Sonntag:</td>
<td>11.30 - 14.00 Uhr & 16.00 - 23.00 Uhr </td>
</tr>

</tbody>
</table>
</body>
</html>
 
Thema:

Text Alignment in Table - not working

Thema:

Text Alignment in Table - not working

Oben Unten