• Wir präsentieren Dir heute ein Stellenangebot für einen Frontend-Entwickler Angular / Java in Braunschweig. Hier geht es zur Jobanzeige

CSS Tabelle

krgewb

krgewb

Top Contributor
Meine Tabelle sieht so aus wie auf a.png. Ich möchte aber, dass sie so aussieht wie auf b.png.
HTML:
    <style>
      p {
        margin: 0px;
      }
      table {
        border: 0px;
      }
      td, th {
        border: 1px solid black;
        text-align: center;
      }
      td {
        width: 20px;
        height: 20px;
      }
    </style>

HTML:
<table>
   <tr>
      <td>0</td>
      <td>0</td>
      <td>1</td>
   </tr>
   <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
   </tr>
   <tr>
      <td>1</td>
      <td>3</td>
      <td>4</td>
   </tr>
</table>
 

Anhänge

  • a.png
    a.png
    16,7 KB · Aufrufe: 6
  • b.png
    b.png
    15 KB · Aufrufe: 7
Zuletzt bearbeitet:
krgewb

krgewb

Top Contributor
Nun möchte ich aber machen, dass z.B. diese vier einen dickeren Rand haben.
 

Anhänge

  • c.png
    c.png
    14,7 KB · Aufrufe: 5
mihe7

mihe7

Top Contributor
HTML:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Tabelle</title>
  <style>
    p {
      margin: 0px;
    }
    table {
      border: 0.5px solid black;
      border-spacing: 0px;
    }
    td, th {
      border: 0.5px solid black;
      text-align: center;
    }
    td {
      width: 20px;
      height: 20px;
    }
    .hl-top { border-top-width: 5px; }
    .hl-left { border-left-width: 5px; }
    .hl-right { border-right-width: 5px; }
    .hl-bottom { border-bottom-width: 5px; }
    </style>
</head>
<body>
  <table>
    <tr>
      <td class="hl-left hl-top">0</td>
      <td class="hl-top hl-right">0</td>
      <td>1</td>
    </tr>
    <tr>
      <td class="hl-left hl-bottom">0</td>
      <td class="hl-bottom hl-right">1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
</body>

Habe ich schon erwähnt, dass mich CSS nervt? :)
 
Thallius

Thallius

Top Contributor
Das table-Element sollte man nicht mehr für das Layout der Oberfläche verwenden. Es gibt heute viel bessere Ansätze, die auch auf kleinen Displays und Mobilgeräten funktionieren, @see: https://www.mediaevent.de/css/display-table.html

Das stimmt so nicht. Tabellen haben immer noch ihre Berechtigung dort wo man Tabellen darstellen will und hier ist das ja wohl der Fall.

@krgewb

Das erste Problem hättest du auch einfach erreichen können indem du das padding der Tabelle explizit auf 0 gesetzt hättest.
 
O

Oneixee5

Bekanntes Mitglied
Das stimmt so nicht. Tabellen haben immer noch ihre Berechtigung dort wo man Tabellen darstellen will und hier ist das ja wohl der Fall.

@krgewb

Das erste Problem hättest du auch einfach erreichen können indem du das padding der Tabelle explizit auf 0 gesetzt hättest.
Beide Aussagen sind falsch, ich habe nicht geschrieben, dass dort wo man Tabellen darstellen will kein table-Element verwenden soll.

Das mit dem padding stimmt auch nicht:
HTML:
<table style="padding: 0; border: solid 1px;" cellpadding="0">
    <tbody>
        <tr style="">
            <td style="border: solid 1px;">foo</td>
            <td style="border: solid 1px;">bar</td>
        </tr>
    </tbody>
</table>
 

Ähnliche Java Themen

Anzeige

Neue Themen


Oben