Sollten Sie Standardstile für `table` haben?

Luke Underwood schrieb mit einer interessanten Frage

Was sind die Best Practices für das Standard-Styling von `<table>`?

Ich denke, es gibt drei Möglichkeiten

• Standardstile haben
• Nicht
• Irgendwo dazwischen

Luke erläutert

Unser Büro ist gespalten. In unseren Basisschablonen werden derzeit keine Stile standardmäßig auf Tabellen angewendet. Sie benötigen eine Klasse, um sie gut aussehen zu lassen (mit Rahmen, Hintergrundfarben usw.). Wir verwenden diese Klasse hauptsächlich für Tabellen, die in Hauptinhaltsbereichen verwendet werden.

Wir Frontend-Entwickler haben entschieden, dass dies am besten ist, da wir so benutzerdefinierte Tabellen einfach gestalten können, ohne Standardstile überschreiben zu müssen. Dazu gehört auch das Überschreiben von Media Queries, die den Abstand auf kleineren Bildschirmen reduzieren, was lästig wäre. Wir denken auch, dass es wichtig wäre, einen Selektor für diese Inhaltstabellen zu haben, falls wir JavaScript-Lösungen wie responsive Tabellen-Plugins implementieren müssen.

Die Backend-Programmierer sind ständig frustriert darüber, dass sie nicht einfach „eine Tabelle auf eine Seite werfen“ können, ohne dass sie gut aussieht, und bestehen darauf, dass Standard-Tabellenstile der richtige Weg sind. Anscheinend kann es schwierig sein, jeder Tabelle eine einfache Klasse hinzuzufügen, und sie denken, wir sollten uns darum kümmern, zusätzlichen CSS-Code zu schreiben, um dies zu umgehen.

Zusammenfassend

Vorteile von Standardstilen

• Sie können einfach „eine Tabelle“ in den HTML-Code einfügen und sie gut aussehen lassen

Vorteile der Anforderung einer Klasse

• Sie können mehrere Tabellenstile haben, ohne gegen die Standardwerte kämpfen zu müssen
• Sie benötigen möglicherweise den Selektor, um diese bestimmten Tabellen zu finden

---

Ich würde ein paar weitere Überlegungen hinzufügen.

Was ist der Kontext?

Eine ist, über den Kontext nachzudenken. Werden diese Tabellen als Inhalt gespeichert und angezeigt? Wie in Artikeln, Dokumentationen usw. Ich bleibe gerne so klassenfrei wie möglich im Inhalt. Ich finde, Klassen halten nicht so lange wie Inhalte. Eines Tages ist Ihr `.striped-table { }` vielleicht kein Ding mehr und Tabellen kehren zu einem stilosen Zustand zurück, der unbeabsichtigt ist. Standardstile würden Sie davor bewahren.

Vielleicht werden Ihre Inhalte in Markdown gespeichert, was ich für langlebige Inhalte sehr empfehle. Markdown bietet Ihnen nicht einmal eine großartige Möglichkeit, einer Tabelle eine Klasse zuzuweisen, also ist das eine Überlegung.

Ist Scoping eine Möglichkeit?

Eine weitere Überlegung ist das Scoping. Vielleicht können Sie *global* Standardstile vermeiden, aber Stile, die offensichtlich innerhalb von Inhaltsbereichen liegen, haben diese.

/* Scoped styles to articles */
article,
.this-is-content-or-whatever {
  table {

  }
  th, td {

  }
}

Ähnlich wie bei Opt-in-Typografie.

Sind leichte Standardstile eine Möglichkeit?

Zusätzlich zu den typischen Benutzeragenten-Stylesheets tragen diese erheblich dazu bei, dass eine Tabelle präsentabel aussieht

table {
  border-collapse: collapse;
}
tr {
  border-bottom: 1px solid #ccc;
}
th, td {
  text-align: left;
  padding: 4px;
}

Das ist nicht viel, womit man im Falle benutzerdefinierter Tabellenklassen kämpfen müsste.

Was machen andere Seiten?

Luke hat recherchiert! Danke Luke.

Website	Standard-Tabellenstile?
Mozilla	Nein
MDN	Nein
CSS Tricks	Ja
Wikipedia	Nein
Google	Nein
eEbay	Nein
Smashing Magazine	Nein
Awwwards	Nein
Twitter	Nein
jQuery	Ja
Modernizr	Nein
GitHub	Nein
W3C	Nein
CodePen	Nein
InvisionApp	Nein
Apple	Nein
Yahoo	Nein
Amazon	Nein
PayPal	Nein
NetFlix	Nein
DropBox	Nein
StackOverflow	Nein
CNN	Nein
Microsoft	Nein
Gumtree	Nein
LinkedIn	Nein
News.com.au	Nein
Bureau of Meteorology	Nein
ABC	Nein
RealEstate.com.au	Nein
Tumblr	Nein
IMDB	Nein
Seek	Nein
Commonwealth Bank	Nein
ANZ	Ja
The Verge	Nein
BBC	Nein
SA Gov	Nein
MailChimp	Nein
Adobe	Ja
Telstra	Nein
Target	Ja
JB Hi-fi	Nein

Es scheint beliebt zu sein, keine Standard-Tabellenstile zu verwenden.

Was ist mit Resets?

Der beliebteste Reset tut es

table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Das erscheint mir ein wenig übertrieben.

Normalize rührt sie nicht an, was viel aussagt. Das bedeutet, dass es keine wesentlichen Unterschiede (oder gar keine?) gibt, wie Standardtabellen browserübergreifend gerendert werden, also gibt es nicht viel zu befürchten.

Was ist mit den großen Frameworks?

• Bootstrap berührt die Standardstile für Tabellen kaum, bietet aber `.table`, `.table-striped` und eine Handvoll anderer, zu denen Sie sich anmelden können.
• Foundation stylt Standardtabellen von Anfang an.

50/50 Spaltung.

Gedanken

Persönlich neige ich dazu, Standardstile für Tabellen zu haben, zumindest in Bereichen, die auf Inhalte beschränkt sind. Ich verwende Tabellen nur für tabellarische Daten und benötige nicht viele Variationen, wie diese tabellarischen Daten präsentiert werden. Selbst wenn ich das täte, wäre es keine besonders schwierige Aufgabe, einige Variationsklassen zu erstellen.