tabelle - html table spacing css




Cellpadding und Cellspacing in CSS festlegen? (18)

Standard

Das Standardverhalten des Browsers entspricht:

table {border-collapse: collapse;}
td    {padding: 0px;}

Zellpolsterung

Legt den Abstand zwischen dem Inhalt der Zelle und der Zellwand fest

table {border-collapse: collapse;}
td    {padding: 6px;}

Zellabstand

Steuert den Abstand zwischen Tabellenzellen

table {border-spacing: 2px;}
td    {padding: 0px;}

Beide

table {border-spacing: 2px;}
td    {padding: 6px;}

Beide (speziell)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

Hinweis: Wenn ein border-spacing eingestellt ist, wird angezeigt, dass die Eigenschaft des Rahmens zum border-collapse der Tabelle separate .

Versuch es selber!

Here finden Sie den alten HTML-Weg, um dies zu erreichen.

In einer HTML-Tabelle können der cellpadding und der cellpadding wie cellspacing festgelegt werden:

<table cellspacing="1" cellpadding="1">

Wie kann dasselbe mit CSS erreicht werden?


CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

Die einfache Lösung für dieses Problem ist:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

Dieser Hack funktioniert für Internet Explorer 6 und höher, Google Chrome , Firefox und Opera :

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

Die * -Deklaration gilt für Internet Explorer 6 und 7 und wird von anderen Browsern ordnungsgemäß ignoriert.

expression('separate', cellSpacing = '10px') gibt 'separate' , aber beide Anweisungen werden ausgeführt, da Sie in JavaScript mehr Argumente übergeben können, als erwartet, und alle werden ausgewertet.


Für Tabellenzellenabstand und Zellabstand sind in HTML 5 veraltet. Jetzt müssen Sie den Abstandsabstand für den Abstandsbereich verwenden. Für den Abstandsbereich müssen Sie den Randabbruch verwenden.

Stellen Sie sicher, dass Sie dies nicht in Ihrem HTML5-Code verwenden. Versuchen Sie immer, diese Werte in der CSS-3-Datei zu verwenden.


Für diejenigen, die einen Cellpacing-Wert ungleich Null wünschen, funktionierte das folgende CSS für mich, aber ich kann es nur in Firefox testen. Informationen zur Kompatibilität finden Sie unter dem Quirksmode- Link, der an anderer Stelle veröffentlicht ist . Es scheint, dass es mit älteren Versionen von Internet Explorer nicht funktioniert.

table {
    border-collapse: separate;
    border-spacing: 2px;
}

In einer HTML-Tabelle können der cellpadding und der cellpadding wie cellspacing festgelegt werden:

Für Cell-Padding : Rufen Sie einfach ein einfaches td/th Cell- padding

EX:

/******Call-Padding**********/

table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}
<table>
		<tr>
			<th>Head1 </th>
			<th>Head2 </th>
			<th>Head3 </th>
			<th>Head4 </th>
		</tr>
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr> 
			<td>31</td>
			<td>32</td>
			<td>33</td>
			<td>34</td>
		</tr>
		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
		</tr>
	</table>

table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}

Für Zellabstände

Rufen Sie einfach einen einfachen table

EX:

/********* Cell-Spacing   ********/
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

td { 
  border: 1px solid red;
}
<table>
		<tr>
			<th>Head1</th>
			<th>Head2</th>
			<th>Head3</th>
			<th>Head4</th>
		</tr>
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr> 
			<td>31</td>
			<td>32</td>
			<td>33</td>
			<td>34</td>
		</tr>
		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
		</tr>
	</table>

/********* Cell-Spacing   ********/
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

td { 
  border: 1px solid red;
}

Mehr Tabellenstil durch CSS-Quelllink hier erhalten Sie mehr Tabellenstil durch CSS


Nach den W3C-Klassifizierungen verstehe ich, dass <table> s nur für die Anzeige von Daten gedacht sind.

Auf dieser Basis fand ich es viel einfacher, ein <div> mit den Hintergründen und all dem zu erstellen und eine Tabelle mit Daten zu haben, die mit position: absolute; über die position: absolute; und background: transparent; ...

Es funktioniert auf Chrome, IE (6 und höher) und Mozilla (2 und höher).

Ränder werden verwendet (oder gemeint), um einen Abstandhalter zwischen Containerelementen wie <table> , <div> und <form> zu erstellen, nicht <tr> , <td> , <span> oder <input> . Wenn Sie es für andere Elemente als Containerelemente verwenden, müssen Sie Ihre Website für zukünftige Browser-Updates anpassen.


Sie können die Auffüllung in den Tabellenzellen einfach mit der CSS-Auffüllereigenschaft festlegen. Dies ist eine gültige Methode, um denselben Effekt wie das cellpadding-Attribut der Tabelle zu erzeugen.

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

In ähnlicher Weise können Sie die CSS-Randabstandseigenschaft verwenden, um den Abstand zwischen benachbarten Tabellenzellengrenzen wie das cellspacing-Attribut anzuwenden. Um den Randabstand zu bearbeiten, muss der Wert der Eigenschaft border collapse jedoch getrennt sein. Dies ist der Standardwert.

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>


Sie können in Ihrem CSS einfach so etwas tun, indem Sie den border-spacing und das padding :

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}
<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>


Versuche dies:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

Oder probiere es aus:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

Verwenden Sie einfach die Option border-collapse: collapse für Ihren Tisch und padding für th oder td


Wie wäre es, wenn Sie den Stil direkt zur Tabelle hinzufügen? Dies ist nicht die Verwendung von table in Ihrem CSS. Dies ist ein BAD- Ansatz, wenn Sie mehrere Tabellen auf Ihrer Seite haben:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

Grundlagen

Um das "cellpadding" in CSS zu steuern, können Sie das padding von Tabellenzellen einfach verwenden. ZB für 10px "cellpadding":

td { 
    padding: 10px;
}

Für "cellspacing" können Sie die CSS-Eigenschaft " border-spacing auf Ihre Tabelle anwenden. ZB für 10px "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

Diese Eigenschaft erlaubt sogar einen separaten horizontalen und vertikalen Abstand, was Sie mit dem "cellspacing" der alten Schule nicht erreichen könnten.

Probleme im IE <= 7

Dies funktioniert in fast allen gängigen Browsern, mit Ausnahme von Internet Explorer bis Internet Explorer 7, wo Sie fast kein Glück haben. Ich sage "fast", da diese Browser immer noch die Eigenschaft border-collapse , die die Grenzen angrenzender Tabellenzellen zusammenführt. Wenn Sie versuchen, den Zellabstand zu beseitigen (d. cellspacing="0" ), sollte der border-collapse:collapse den gleichen Effekt haben: kein Leerzeichen zwischen Tabellenzellen. Diese Unterstützung ist jedoch cellspacing , da sie ein vorhandenes cellspacing HTML-Attribut des Tabellenelements nicht überschreibt.

Kurz gesagt: Bei Browsern, die nicht mit dem Internet Explorer 5-7 arbeiten, wird border-spacing Rändern berücksichtigt. Wenn Ihre Situation in Internet Explorer genau richtig ist (Sie möchten 0 Zellabstand haben und Ihre Tabelle noch nicht definiert ist), können Sie border-collapse:collapse .

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Hinweis: Einen umfassenden Überblick über die CSS-Eigenschaften, die auf Tabellen angewendet werden können und für welche Browser, finden Sie auf dieser fantastischen Quirksmode-Seite .


table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-padding von cell-padding kann durch padding in CSS erfolgen, während cell-spacing kann, indem der border-spacing für die Tabelle festgelegt wird.

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Fiddle


table{border-spacing:4px; color: #000; background:#ccc; }
td{padding-left:4px;}

td {
    padding: npx; //for cellpadding
    margin: npx; //for cellspacing
    border-collapse: collapse; //for showing borders in a better shape.
}

Wenn der margin nicht funktioniert hat, versuchen Sie, die display von tr auf block und der Rand funktioniert dann.





alignment