# It would be cool if \<table\> tags had a spiffy default style

**URL:** <https://talk.observablehq.com/t/it-would-be-cool-if-table-tags-had-a-spiffy-default-style/588>\
**Category:** Uncategorized\
**Created:** [March 31, 2018, 6:12pm UTC](https://talk.observablehq.com/t/it-would-be-cool-if-table-tags-had-a-spiffy-default-style/588 "2018-03-31T18:12:52Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![palewire](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/palewire/32/25_2.png) [@palewire](https://talk.observablehq.com/u/palewire)\
**Post date:** [March 31, 2018, 6:12pm UTC](https://talk.observablehq.com/t/it-would-be-cool-if-table-tags-had-a-spiffy-default-style/588/1 "2018-03-31T18:12:52Z")

</div>

I’m continuing to putter away in my baseball notebook.

> **[The Ichiro Bet](https://observablehq.com/@palewire/the-ichiro-bet)**
>
> An Observable notebook by Ben Welsh.

As I integrate more data, I’m experimenting with surfacing some of it ina table. Your excellent templating tricks make that easy, but the default table style is pretty plain. I doubt I’ve thought through all of the implications, but in in this case I would appreciated an “opinionated” bit of CSS that doctored up the table to fit your site style.

 ![Screenshot%20from%202018-03-31%2011-10-25](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/b1b98d0fe8fcabbb066015f45600e373452b8318.png)

---

<div class="post-metadata">

**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\
**Post date:** [April 2, 2018, 8:10pm UTC](https://talk.observablehq.com/t/it-would-be-cool-if-table-tags-had-a-spiffy-default-style/588/2 "2018-04-02T20:10:27Z")

</div>

I dunno, Ben. Our default table style looks pretty reasonable to me:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/2ff3283fe587ee24c2e5ac07e4510452b764f9ee.png)

Here’s all the current CSS:

```css
table {
  width: 100%;
  max-width: 640px;
  border-spacing: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}

th {
  text-align: left;
}

thead th {
  border-bottom: solid 1px #ccc;
}

tbody tr:not(:last-child) td {
  border-bottom: solid 1px #eee;
}

```

What sort of spiffiness are you looking for? I don’t think we’re going to go as far as zebra striping, or hover highlighting cells, or anything with that level of zazz…

---

<div class="post-metadata">

**Author:** ![palewire](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/palewire/32/25_2.png) [@palewire](https://talk.observablehq.com/u/palewire)\
**Post date:** [April 2, 2018, 8:57pm UTC](https://talk.observablehq.com/t/it-would-be-cool-if-table-tags-had-a-spiffy-default-style/588/3 "2018-04-02T20:57:02Z")

</div>

Ah! I didn’t realize that thead and tbody would bring some styles with them. Very good!

---

<div class="post-metadata">

**Author:** ![tom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tom/32/2262_2.png) [@tom](https://talk.observablehq.com/u/tom)\
**Post date:** [April 2, 2018, 10:11pm UTC](https://talk.observablehq.com/t/it-would-be-cool-if-table-tags-had-a-spiffy-default-style/588/4 "2018-04-02T22:11:04Z")

</div>

I think we could really use some great table defaults with real sophisticated professional defaults - like I’d really love to

- automatically use tabular numbers, so numbers line up in columns
- have good defaults for right-aligning numeric rows
- and good defaults for rows with decimal accuracy
- and maybe even table sorting

But after tinkering with implementing this in Observable-the-application-itself, I think it’ll really be best as a notebook that people can import, since even though these table tweaks are great, they’re also a bit opinionated, and having this be opt-in avoids the case where someone just wants tables that are more or less the HTML defaults. Our built-in styles are pretty light-touch and they should probably stay that way, to maximize flexibility.

---

<div class="post-metadata">

**Author:** ![tom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tom/32/2262_2.png) [@tom](https://talk.observablehq.com/u/tom)\
**Post date:** [April 10, 2018, 9:54pm UTC](https://talk.observablehq.com/t/it-would-be-cool-if-table-tags-had-a-spiffy-default-style/588/5 "2018-04-10T21:54:23Z")

</div>

Okay! After putting this on the backburner for a week, I gave it a first shot:

> **[Tables](https://observablehq.com/@tmcw/tables)**
>
> An Observable notebook by Tom MacWright.

Reusable tables. Hits many of my initial goals:

- Decent, minimal stylistic defaults
- Built-in support for rank columns, sorting
- Light-touch auto-styling for numeric columns
- Custom cell formatters
- Customizable titles

Feedback welcome! Would love to hit 98% of the common cases with this notebook and make it simple to drop in better tables for analysis.

---

<div class="post-metadata">

**Author:** ![palewire](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/palewire/32/25_2.png) [@palewire](https://talk.observablehq.com/u/palewire)\
**Post date:** [April 10, 2018, 10:31pm UTC](https://talk.observablehq.com/t/it-would-be-cool-if-table-tags-had-a-spiffy-default-style/588/6 "2018-04-10T22:31:01Z")

</div>

I’ll give it a try. I am sympathetic to @jashkenas fear of going overboard. Though, as I’ve said in other threads here, I do think the RMarkdown table filters and one of its few ++ features that its competitors lack.

Here’s an example of that [https://wpinvestigative.github.io/federal\_employees\_trump\_2017/employment.html](https://wpinvestigative.github.io/federal_employees_trump_2017/employment.html)

---

<div class="post-metadata">

**Author:** ![gampleman](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/gampleman/32/95_2.png) [@gampleman](https://talk.observablehq.com/u/gampleman)\
**Post date:** [April 18, 2018, 2:45pm UTC](https://talk.observablehq.com/t/it-would-be-cool-if-table-tags-had-a-spiffy-default-style/588/7 "2018-04-18T14:45:47Z")

</div>

I’ve built something similar as well: [https://beta.observablehq.com/@gampleman/table](https://beta.observablehq.com/@gampleman/table)

---

<div class="post-metadata">

**Author:** ![pembeci](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pembeci/32/874_2.png) [@pembeci](https://talk.observablehq.com/u/pembeci)\
**Post date:** [November 9, 2018, 11:42pm UTC](https://talk.observablehq.com/t/it-would-be-cool-if-table-tags-had-a-spiffy-default-style/588/8 "2018-11-09T23:42:45Z")

</div>

Hi Tom, I was playing with your notebook and noticed some minor problems with the paging. Here is a possible fix. Spotify fetch also seems broken currently. Thanks for the notebook. I learnt some good techniques to make things work in Observable (i.e. modifying the cell html with rerender).

```
       ${pages ? html`<div class='pretty-pager'>
          <button data-action="previous" ${page==0 ? 'disabled' : ''}>Previous</button>
          ${Array.from({ length: pages }).map((_, i) =>
            html`<button data-page="${i}">${i + 1}</button>`
          )}
          <button data-action="next" ${page==pages-1 ? 'disabled' : ''}>Next</button>
        </div>` : ''}
```

---

<div class="post-metadata">

**Author:** ![tom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tom/32/2262_2.png) [@tom](https://talk.observablehq.com/u/tom)\
**Post date:** [November 11, 2018, 3:53am UTC](https://talk.observablehq.com/t/it-would-be-cool-if-table-tags-had-a-spiffy-default-style/588/9 "2018-11-11T03:53:16Z")

</div>

Yep, you’re right - I’ve been meaning to take some time and really improve the table output. Will do so soon.

---

<div class="post-metadata">

**Author:** ![Job](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/job/32/1185_2.png) [@Job](https://talk.observablehq.com/u/Job)\
**Post date:** [November 13, 2018, 5:56am UTC](https://talk.observablehq.com/t/it-would-be-cool-if-table-tags-had-a-spiffy-default-style/588/10 "2018-11-13T05:56:27Z")

</div>

offtopic: @gampleman, I don’t know if this was on purpose but I love how it makes the page look like it’s breathing:

[https://blindedcyclops.neocities.org/breathe%20baby.mp4](https://blindedcyclops.neocities.org/breathe%20baby.mp4)

---

<div class="post-metadata">

**Author:** ![cornhundred](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cornhundred/32/1705_2.png) [@cornhundred](https://talk.observablehq.com/u/cornhundred)\
**Post date:** [March 17, 2020, 3:53am UTC](https://talk.observablehq.com/t/it-would-be-cool-if-table-tags-had-a-spiffy-default-style/588/11 "2020-03-17T03:53:29Z")

</div>

Great work @tom! How hard would it be to be able to add a search box that would filter rows from a table (in a observable fashion)? I’m working on a table viewer for the latest COVID-19 Biorxiv publications [https://observablehq.com/@ismms-himc/covid-19-sars-cov-2-preprints-from-medrxiv-and-biorxiv](https://observablehq.com/@ismms-himc/covid-19-sars-cov-2-preprints-from-medrxiv-and-biorxiv) which can be used to pull up abstracts and links to papers. However, it would be cool to be able to filter out papers using a search box.

**Update**  
I just added a search feature by setting a variable - will switch to better looking search box later.

---

<div class="post-metadata">

**Author:** ![kjmph](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/kjmph/32/2878_2.png) [@kjmph](https://talk.observablehq.com/u/kjmph)\
**Post date:** [April 3, 2020, 6:00pm UTC](https://talk.observablehq.com/t/it-would-be-cool-if-table-tags-had-a-spiffy-default-style/588/13 "2020-04-03T18:00:22Z")

</div>

Hello @tmcw, when the number of elements in the table are less than the number of elements per page perhaps someone would like the `Previous 1 Next` links removed. One liner change here: [https://observablehq.com/@khubert/tables](https://observablehq.com/@khubert/tables)

Relevant change:

`pages && data.length > paged`

---

<div class="post-metadata">

**Author:** ![melaniewalsh](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/melaniewalsh/32/3842_2.png) [@melaniewalsh](https://talk.observablehq.com/u/melaniewalsh)\
**Post date:** [November 12, 2020, 11:03pm UTC](https://talk.observablehq.com/t/it-would-be-cool-if-table-tags-had-a-spiffy-default-style/588/14 "2020-11-12T23:03:42Z")

</div>

Hi @tom! I’m a big fan of your tables. Thanks so much for your work! The two features that I’m really interested in from your tables are the sortable columns and the search function, but it doesn’t look like both are available in the same iteration. Do you know of a way to add searchability to these tables ([https://observablehq.com/@tmcw/tables?collection=@tmcw/utilities](https://observablehq.com/@tmcw/tables?collection=@tmcw/utilities)) or conversely sortability to these tables ([https://observablehq.com/@tmcw/tables/2](https://observablehq.com/@tmcw/tables/2))?

---

<div class="post-metadata">

**Author:** ![melaniewalsh](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/melaniewalsh/32/3842_2.png) [@melaniewalsh](https://talk.observablehq.com/u/melaniewalsh)\
**Post date:** [November 13, 2020, 8:18pm UTC](https://talk.observablehq.com/t/it-would-be-cool-if-table-tags-had-a-spiffy-default-style/588/15 "2020-11-13T20:18:05Z")

</div>

**Update**

I added a search box to the first iteration of @tom’s table by following @cornhundred’s [example](https://observablehq.com/@ismms-himc/covid-19-sars-cov-2-preprints-from-medrxiv-and-biorxiv), which filters data based on search strings like so:

```
filtered_data = merged_data.filter(x => {
  let search_string =
    x.Title.toString().toLowerCase() + x.Author.toString().toLowerCase();
  return search_string.includes(inst_search.toLowerCase());
})

```

Here’s how I’m implementing it in [my own notebook](https://observablehq.com/@mellymeldubs/the-goodreads-classics-sortable-table).