Spaties in HTML-tabellen verwijderen

Als u tabellen gebruikt voor paginalay-out (een nee-nee in XHTML), zult u waarschijnlijk de lelijke toevoeging van extra ruimte in uw lay-outs ervaren. Om dit probleem op te lossen, moet u zowel uw HTML-tabeldefinitie als de bijzonderheden van een overkoepelend stijlblad controleren.

HTML-tabeldefinitie

de HTML label voor tabellen is standaard niet van toepassing op sommige spatiëringsvereisten. Controleer drie dingen over de about tafel tag in uw HTML-document:

  1. Heeft uw tabel het kenmerk cellpadding ingesteld op 0?
    1. celpadding = "0"
  2. Heeft uw tabel het cellpacing-attribuut ingesteld op 0?
    1. cellenafstand = "0"
  3. Zijn er spaties voor of na uw inhoud en de tags van de tabel?

Nummer 3 is de kicker. Veel HTML-editors graag dat de code allemaal gespreid is, om het gemakkelijk te lezen te maken. Maar veel browsers interpreteren die tabbladen, spaties en regelretouren als gewenste extra ruimte in uw tabellen. Verwijder de witruimte rond uw tags en u krijgt scherpere tabellen.

Stijlbladen

Het is echter mogelijk niet de HTML die is uitgeschakeld.

instagram viewer
Trapsgewijze stijlbladen beheers sommige weergaveattributen van tabellen en afhankelijk van de pagina heb je in de eerste plaats al dan niet opzettelijk tabelspecifieke CSS toegevoegd.

Scan het betreffende CSS-bestand voor een van de volgende waarden in de tafel, dit, of tdeigenschappen en pas indien nodig aan:

  • grens: Specificeert de attributen van een tabel of celrand
  • grens-instorting: Behandelt aangrenzende randen als één, om dubbele randbreedtes te voorkomen
  • opvulling: Biedt lege ruimte, in pixels, rond elke cel
  • tekst-uitlijnen: Bepaalt de uitlijning van tekst in de cel
  • grensafstand: Stelt de afstand tussen cellen in, in pixels

alternatieven

Hoewel u nog steeds HTML-tabellen kunt gebruiken (de standaard is goed ingeburgerd en wordt in de huidige tijd universeel ondersteund) browsers), gebruikt het meeste moderne responsieve webontwerp trapsgewijze stijlbladen om elementen op een pagina te plaatsen. Tabellen zijn nog steeds logisch voor hun oorspronkelijke doel om tabelgegevens weer te geven, maar voor het organiseren van de lay-out en inhoud van een pagina kunt u in plaats daarvan veel beter CSS-lay-out gebruiken.

instagram story viewer