HTML-tabel heeft ruimte tussen kolommen nodig, geen rijen

Ik heb een HTML-tabel.
Ik moet ruimte hebben tussen de tabelkolommen, maar niet de tabelrijen.

Als ik de CSS-eigenschap cellspacinggebruik, gebeurt dit tussen rijen en kolommen. Ik kan ook geen CSS gebruiken in wat ik doe. Ik moet pure HTML gebruiken.

Antwoord 1, autoriteit 100%

Als je inline styling kunt gebruiken, kun je de linker- en rechteropvulling op elke tdinstellen. Of je gebruikt een extra tdtussen kolommen en stelt een aantal vaste spaties zoals @rene vriendelijk voorstelde.

http://jsfiddle.net/u5mN4/

http://jsfiddle.net/u5mN4/1/

Beide zijn behoorlijk lelijk ;p css ftw

Antwoord 2, autoriteit 97%

De betere aanpak maakt gebruik van de CSS-regel van Shredder: padding: 0 15px 0 15px
alleen in plaats van inline css, definieer een css-regel die van toepassing is op alle tds.
Doe dit door een stijltag op uw pagina te gebruiken:

<style type="text/css">
  td {
    padding: 0 15px;
  }
</style>

of geef de tabel een klasse zoals “paddingBetweenCols” en gebruik in de site css

.paddingBetweenCols td {
  padding: 0 15px;
}

De site css-aanpak definieert een centrale regel die door alle pagina’s opnieuw kan worden gebruikt.

Als je de site css-aanpak wilt gebruiken, is het het beste om een klasse zoals hierboven te definiëren en de opvulling op de klasse toe te passen… tenzij je wilt dat alle td’s op de hele site dezelfde regel hebben.

Fiddle voor het gebruik van stijltag

Fiddle voor het gebruik van site-css

Antwoord 3, autoriteit 30%

<table cellpadding="pixels"cellspacing="pixels"></table>
<td align="position"valign="position"></td>

cellpadding=”length in pixels” ~ Het cellpadding-attribuut, gebruikt in de <table>-tag, geeft aan hoeveel lege ruimte moet worden weergegeven tussen de inhoud van elke tabelcel en de bijbehorende rand. De waarde wordt gedefinieerd als een lengte in pixels. Daarom zal een cellpadding="10"attribuut-waardepaar 10 pixels lege ruimte weergeven aan alle vier de zijden van de inhoud van elke cel in die tabel.

cellspacing=”length in pixels” ~ Het cellpacing-attribuut, ook gebruikt in de <table>-tag, definieert hoeveel lege ruimte er tussen aangrenzende tabellen moet worden weergegeven cellen en tussen tabelcellen en de tabelrand. De waarde wordt gedefinieerd als een lengte in pixels. Daarom zal een cellspacing="10"attribuut-waardepaar alle aangrenzende cellen in de respectievelijke tabel horizontaal en verticaal scheiden met een lengte van 10 pixels. Het verschuift ook alle cellen van het frame van de tabel aan alle vier zijden met een lengte van 10 pixels.

Antwoord 4, autoriteit 22%

In de meeste gevallen kan het beter zijn om de kolommen alleen aan de rechterkant op te vullen, zodat alleen de ruimte tussen de kolommen wordt opgevuld en de eerste kolom nog steeds wordt uitgelijnd met de tabel.

CSS:

.padding-table-columns td
{
    padding:0 5px 0 0; /* Only right padding*/
}

HTML:

<table className="padding-table-columns">
  <tr>
    <td>Cell one</td>
     <!-- There will be a 5px space here-->
    <td>Cell two</td>
     <!-- There will be an invisible 5px space here-->
  </tr>
</table>

Antwoord 5, autoriteit 5%

Dit kan worden bereikt door opvulling tussende kolommen te plaatsen met behulp van CSS. U kunt opvulling toevoegen aan de linkerkant van alle kolommen behalve de eerste, of opvulling toevoegen aan de rechterkant van alle kolommen behalve de laatste. U moet voorkomen dat u opvulling rechts van de laatste kolom of links van de eerste kolom toevoegt, omdat hierdoor overtollige witruimte wordt ingevoegd. Je moet ook voorkomen dat je te prescriptief bent met klassen om aan te geven welke kolommen de extra opvulling moeten hebben, omdat dit het onderhoud moeilijker maakt als je later een nieuwe kolom toevoegt.

Met de ‘lobotomised owl selector‘ kun je alle broers en zussen selecteren, ongeacht of ze zijn een th, tdof iets anders.

tr > * + * {
  padding-left: 4em;
}

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>