I am available for hire!

Advent

Day 16: Table ๐ŸŽถ


A table is used to display tabular data.

The example component is visible below.


Christmas carols origins
Song ๐ŸŽถ Country ๐Ÿ—บ๏ธ
Silent Night ๐Ÿ‡ฆ๐Ÿ‡น Austria
Santa Claus Is Coming To Town ๐Ÿ‡บ๐Ÿ‡ธ United States of America
Hark! The Herald Angels Sing ๐Ÿด๓ ง๓ ข๓ ฅ๓ ฎ๓ ง๓ ฟ England
Deck The Halls ๐Ÿด๓ ง๓ ข๓ ท๓ ฌ๓ ณ๓ ฟ Wales
Jingle Bells ๐Ÿ‡บ๐Ÿ‡ธ United States of America
O Tannenbaum ๐Ÿ‡ฉ๐Ÿ‡ช Germany

A few notes about this table component:

  • CSS Variables are used for colors,
  • the .advent-table tr:only-child selector is used to adding a thicker border to distinguish table head,
  • the .advent-table tr:not(:only-child):nth-child(even) selector is used to apply background color to every even sibling that is not the only one (see my article about โ€œenablingโ€ selectors).

The code:

<div class="advent-table">
<table>
<caption>Christmas carols origins</caption>
<thead>
<tr>
<th>Song ๐ŸŽถ</th>
<th>Country ๐Ÿ—บ๏ธ</th>
</tr>
</thead>
<tbody>
<tr>
<td>Silent Night</td>
<td>๐Ÿ‡ฆ๐Ÿ‡น Austria</td>
</tr>
<tr>
<td>Santa Claus Is Coming To Town</td>
<td>๐Ÿ‡บ๐Ÿ‡ธ United States of America</td>
</tr>
<tr>
<td>Hark! The Herald Angels Sing</td>
<td>๐Ÿด๓ ง๓ ข๓ ฅ๓ ฎ๓ ง๓ ฟ England</td>
</tr>
<tr>
<td>Deck The Halls</td>
<td>๐Ÿด๓ ง๓ ข๓ ท๓ ฌ๓ ณ๓ ฟ Wales</td>
</tr>
<tr>
<td>Jingle Bells</td>
<td>๐Ÿ‡บ๐Ÿ‡ธ United States of America</td>
</tr>
<tr>
<td>O Tannenbaum</td>
<td>๐Ÿ‡ฉ๐Ÿ‡ช Germany</td>
</tr>
</tbody>
</table>
</div>
.advent-table {
--color-xmas-alpha: #f7efef;
--color-xmas-beta: #d72621;
--color-xmas-gamma: #639565;
--color-xmas-delta: #fff;
overflow: auto;
}

.advent-table table {
border-collapse: collapse;
background-color: var(--color-xmas-delta);
color: var(--color-xmas-gamma);
min-width: calc(100% - 2px);
}

.advent-table th,
.advent-table td
{
border: 1px solid var(--color-xmas-beta);
padding: .5em;
}

.advent-table tr:only-child {
border-bottom: .2em solid var(--color-xmas-beta);
}

.advent-table tr:not(:only-child):nth-child(even) {
background-color: var(--color-xmas-alpha);
}

.advent-table caption,
.advent-table th
{
font-weight: bold;
}

Advent of UI Components ๐ŸŽ„

Check other UI Components.

Day 24: Details ๐ŸŽน

A details component contains the summary and the complete information, which could be toggled between visible and hidden states.
Check the component

Day 23: Radio ๐Ÿ“ฑ

A radio component is a form item used when only one selection is possible in a group of mutually exclusive choices.
Check the component

Day 22: Checkbox ๐Ÿงฆ

A checkbox component is a form item used when multiple selectable objects are in a list.
Check the component

Day 21: Notification ๐Ÿคซ

A notification component usually displays a message that communicates information to the user.
Check the component

Day 20: Code block ๐Ÿ’ป

A code block UI component represents a block of code that is formatted neatly.
Check the component

Day 19: Pagination ๐Ÿ“–

Pagination helps users browse through the sequence of related content.
Check the component

Day 18: Social share ๐Ÿ”—

A social share is a component that displays anchors holding social sharing links of a current page.
Check the component

Day 17: Card ๐ŸŽด

A card component usually displays an image and extra information in card-like format.
Check the component

Day 16: Table ๐ŸŽถ

A table is used to display tabular data.
Check the component

Day 15: Breadcrumb ๐Ÿž

A breadcrumb is an element that helps users understand the hierarchy of the page and site.
Check the component

Day 14: Blockquote ๐Ÿ’ฌ

A blockquote is used to highlight a quote on a page.
Check the component

Day 13: List ๐Ÿ—’๏ธ

An (unordered) list usually consists of items displayed as bullets.
Check the component

Day 12: Figure ๐Ÿ–ผ๏ธ

A figure element represents a graphic asset with an optional caption.
Check the component

Day 11: Video Embed ๐Ÿ“บ

A video embed is a code snippet that allows us to embed the video from a third-party platform like YouTube or Video to our site.
Check the component

Day 10: Footer ๐Ÿ‘‡

A footer is a component that sits at the bottom of every page. It usually consists of navigation and additional information, like website copyright and legal links.
Check the component

Day 9: Header โ˜๏ธ

A header usually consists of navigation that has links to different parts of the website.
Check the component

Day 8: Hero ๐Ÿฆธโ€โ™‚๏ธ

A hero component usually displays the page title, description, and, sometimes, a CTA.
Check the component

Day 7: Intro ๐Ÿ’ฌ

An intro components usually provides basic information of the page. It is one of the first components on the page.
Check the component

Day 6: Horizontal Rule ใ€ฐ๏ธ

A horizontal rule is usually used as a visual divider between two textual elements.
Check the component

Day 5: Split ๐Ÿ’”

A split component consists of two elements, usually image and text, sitting next to each other horizontally.
Check the component

Day 4: Banner ๐Ÿšฉ

A banner is an element that serves to highlight information, like a website page or an event or Advent of UI Components.
Check the component

Day 3: Gallery ๐Ÿฟ

Galleries are an inevitable part of every respected site. Here's a Christmas gallery.
Check the component

Day 2: Tag ๐ŸŽ

Tags often represent information like category, state, or additional information.
Check the component

Day 1: Button ๐ŸŽ…

Let's start with a classic button. Every website needs one, right?
Check the component