Feature Table Design

Ich bin auf das Feature-Tabellen-Design von Shopify auf Pattern Tap gestoßen und dachte mir: VERDAMMT SHOPIFY, das ist eine verdammt schicke Tabelle. Ich war inspiriert, es nachzuahmen. Zuerst in Photoshop, dann in HTML/CSS. Das Nachbauen von coolen Dingen, die man im Web findet, ist definitiv eine Übung, die ich empfehle (ein paar Tage später las ich dies – ich könnte dem nicht mehr zustimmen). Wie diese Übungen typischerweise, führte es mich auf einige interessante Wege.

Hier ist mein Nachbau

Demo anzeigen   Dateien herunterladen

Der Markup

Hier ist das gekürzte HTML

<table id="feature-table">
  <colgroup class="basic"></colgroup>
  <colgroup class="plus"></colgroup>
  <colgroup class="premium" id="featured"></colgroup>
  <colgroup class="pro"></colgroup>
	<thead>
		<tr>
			<th id="header-basic"><span>$15 Basic</span> <a class="button" href="#">Sign Up</a></th>
			<th id="header-plus"><span>$35 Plus</span><a class="button" href="#">Sign Up</a></th>
			<th id="header-premium"><span>$99 Premium</span><a class="button" href="#">Sign Up</a></th>
			<th id="header-pro"><span>$150 Pro</span><a class="button" href="#">Sign Up</a></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>50 pages</td>
			<td>75 pages</td>
			<td>Unlimited</td>
			<td>Unlimited</td>
		</tr>
    <!-- More rows here -->
	</tbody>
</table>

Ziemlich sauber. Das Einzige, was nicht perfekt sauber ist, ist der <span> im Header. Dort gibt es diesen ganzen schicken Farbverlauf und schicken Schriftzug. Theoretisch könnte das mit einer Menge CSS3 gemacht werden, aber wissen Sie, manchmal ist ein Bild einfach gut so, verdammt, besonders wenn es sich um CSS-Bildersetzung handelt, die perfekt zugänglich ist.

Bemerkenswert ist das <colgroup>-Element, das meiner Meinung nach unterbewertet wird. Colgroups ermöglichen es Ihnen, eine ganze Spalte von Tabellenzellen anzusprechen und Stile anzuwenden, auch wenn diese Tabellenzellen nicht tatsächlich Nachkommen der <colgroup> sind. Eine seltsame Vorstellung, aber es funktioniert und ist einfacher, als jeder einzelnen Tabellenzelle einen Klassennamen zu geben, der angibt, zu welcher Spalte sie gehört.

Wenn Sie ein schnelles Markup benötigen, habe ich etwas, das Sie auf HTML-Ipsum kopieren und einfügen können.

Das CSS

Jede Header-Zelle (<th>) hat eine ID. Wir werden ihnen eine feste Höhe geben und Hintergrundbilder dafür festlegen. Vertikale Ausrichtung unten mit etwas unterem Polster ermöglicht es uns, den Link-Button gleichmäßig zu platzieren. Der Span in diesen Headern wird über absolute Positionierung von der Seite geschoben (d. h. zugängliches Ausblenden).

#feature-table th { height: 120px; padding-bottom: 14px; vertical-align: bottom; }
#header-basic { background: url(../images/header-15.png) no-repeat; }
#header-plus { background: url(../images/header-35.png) no-repeat; }
#header-premium { background: url(../images/header-99.png) no-repeat; }
#header-pro { background: url(../images/header-150.png) no-repeat; }
#feature-table th span { position: absolute; top: -9999px; left: -9999px; }

Apropos Buttons. Ich habe einfach den CSS Button Maker verwendet, um schnell einen Button zu entwerfen, der meiner Meinung nach gut aussah und zum Farbschema passte, und den CSS-Code in diese Demo kopiert und eingefügt.

Um die Zellen einzufärben, habe ich einen Fallback-Hex-Code und dann einen HSLa-Farbwert festgelegt. Diese Klassennamen zielen auf die Colgroup-Elemente ab.

.basic   { background-color: #d5e4bc; background-color: hsla(85,  30%, 80%, 1); }
.plus    { background-color: #c1dcb7; background-color: hsla(110, 30%, 80%, 1); }
.premium { background-color: #bad6c8; background-color: hsla(150, 30%, 80%, 1); }
.pro     { background-color: #bbd3dc; background-color: hsla(190, 30%, 80%, 1); }

Das Endergebnis ist zebragestreift und hat diese "Featured Column"-Funktion. Aber wir können das mit JavaScript angehen...

Das JavaScript

jQuery, offensichtlich. Wir können die Klasse "odd" für ungerade Tabellenzeilen und auch eine Klasse "final-row" mit jQuery super einfach anwenden

$("tr:odd").addClass("odd");  // Zebra action
$("tr:last").addClass("final-row");  // For extra padding

Um die "Featured"-Spalte zu behandeln und semantisch zu bleiben, weisen wir der Colgroup einfach eine ID zu

<colgroup class="premium" id="featured"></colgroup>

Nun muss das JavaScript herausfinden, welche Spalte das ist.

// Figure out which column # is featured.
var featuredCol;
$("colgroup").each(function(i) {
    if (this.id == "featured") featuredCol = i+1;
});

Jetzt werden wir durch alle Tabellenzellen schleifen und herausfinden, ob sich die Zelle in der Spalte direkt vor der Featured Column befindet (wenn ja, weisen wir eine Klasse "leftOfFeatured" zu) oder in der Spalte direkt nach der Featured Column (wenn ja, weisen wir eine Klasse "rightOfFeatured" zu).

Während wir dabei sind, können wir auch allen Tabellenzellen Klassennamen zuweisen, die ihre Spalte angeben. Colgroups sollten diesen Bedarf beseitigen, aber es stellt sich heraus, dass sie eine ziemlich signifikante Schwäche haben. Sie können nicht etwas tun wie

.basic .odd { 
   /* 
      .basic is the colgroup, .odd is the row
      the row really isn't a descendant of the colgroup 
      in other words, this doen't work
   */
}

Dieses Design erfordert unterschiedliche Farbvariationen je nach Spalte. Also, während wir diesen Loop durchlaufen, werden wir einfach Klassennamen zu den Tabellenzellen hinzufügen und diese Klassennamen verwenden, um zu tun, was wir wollen.

// Apply classes to each table cell indicating column
// Also applies classes if cell is right or left of featured column

var numCols = $("colgroup").length;

$("td, th").each(function(i) {
    $(this).addClass("table-col-" + ((i % numCols) + 1));
    if (((i%numCols)+1) == (featuredCol-1)) $(this).addClass("leftOfFeatured");
    if (((i%numCols)+1) == (featuredCol+1)) $(this).addClass("rightOfFeatured");
});

Die Variable i in dieser Funktion ist der Index. Sie gibt uns im Grunde an, auf welcher Iteration des Loops wir uns befinden. Also die 50. Tabellenzelle, die sie findet, der Index ist 49 (Index ist nullbasiert). Wenn wir also den Index modulo der Anzahl der Spalten nehmen (bestimmt durch Testen der Länge des jQuery-Sets) und eins addieren, haben wir die Nummer der Spalte, in der sich die Zelle befindet. Beispiel: 4 Spalten, 10. gefundene Zelle. 9 % 4 = 1, plus 1 ist 2, also ist die 10. Zelle in der 2. Spalte. Und somit erhält diese Zelle die Klasse "table-col-2".

Mit den .odd-Klassen der Zeile und den neuen table-col-x-Klassen können wir jetzt wirklich zebragestreift sein, wie das Design es verlangt

.odd .table-col-1 { background-color: #edf3e2; background-color: hsla(85,  30%, 94%, 1); }
.odd .table-col-2 { background-color: #edf3e2; background-color: hsla(110, 30%, 94%, 1); }
.odd .table-col-3 { background-color: #edf3e2; background-color: hsla(150, 30%, 94%, 1); }
.odd .table-col-4 { background-color: #e2ecf0; background-color: hsla(190, 30%, 94%, 1); }

Beachten Sie, dass es sich wieder um Hex-Code-Fallbacks und HSLa handelt. Das Tolle an der Verwendung von HSLa hier war, dass die Werte bis auf den dritten Wert (die "Helligkeit") exakt gleich sind. Wir erhöhen diesen Wert um 14% und das ist der wahrnehmbare Unterschied im Ton.

Die Klassen "leftOfFeatured" und "rightOfFeatured" wenden ein Hintergrundbild an, nur einen alpha-transparenten PNG-Schatten, der nach links bzw. rechts ausgerichtet und wiederholt ist.

.leftOfFeatured  { background-image: url(../images/shadow-left.png);  background-repeat: repeat-y; background-position: right center; }
.rightOfFeatured { background-image: url(../images/shadow-right.png); background-repeat: repeat-y; background-position: left  center; }

Fazit

Das war's also, Leute. Es hat mir Spaß gemacht, etwas nachzubilden, das ich für großartig hielt, aber auf eine Art und Weise, wie "so würde ich es machen", anstatt ihren Code zu spähen. Ich empfehle diese Art von Übung sehr, wenn Ihr Zeitplan es zulässt.

Demo anzeigen   Dateien herunterladen