> For the complete documentation index, see [llms.txt](https://kmdesign.services.gatech.edu/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kmdesign.services.gatech.edu/components/tabular-data-tables-coming-soon.md).

# Tables

![](/files/-MYuVuUE_KcexdgRNScs)

## Purpose

A table is great for displaying multiple points of data across a range of items. For example, a list of technology platforms with their product name, capacity, status, cost, etc. would display well as a table.

## Accessibility Requirements

There are specific technical requirements for tables to be Section 508 compliant:

* Each column or row that is a header, must be labeled the \<th> element.
* The table must include a \<caption> element.

{% content-ref url="/pages/-MUHJyU\_fWf2Nr9Sz5gr" %}
[How To Create Accessible Tables](/components/tabular-data-tables-coming-soon/make-accessible-tables.md)
{% endcontent-ref %}

## Best Practices

There are 3 simple rules.

* Right-aligned numeric columns
* Left-aligned text columns
* Column names aligned according to column content

## Focus

### Focus on the most important <a href="#id-0dab" id="id-0dab"></a>

Try to position key columns from left to right (this may be the opposite way, based on the region you’re designing for) — this is based on the way we read. Columns on the left will get the most attention. We will check the other columns only if we’re interested in something specific.

> The F-Layout relies upon various eye tracking studies for its foundational concept. These scientific studies show that web surfers read the screen in an “F” pattern — seeing the top, upper left corner and left sides of the screen most… only occasionally taking glances towards the right side of the screen. These eye tracking studies argue in favor of placing the most important elements of your site (branding, navigation, call to action) on the left side of the design.You can find out more about F-patterns in this article by **Brandon Jones** [http://webdesign.tutsplus.com](http://webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-design--webdesign-687)

## Type

* Don’t Use All Caps as it is hard to read
* Avoid using Serif fonts as they create additional visual noise
* Avoid using bold and italic
* Use good fonts only

![Image for post](https://miro.medium.com/max/60/1*ot0or66Z02kp9CIG3wBoAg.png?q=20)

## Avoid Duplication

I see needless duplication very often in UI design. It has big impact on readability as it adds extra items without any value.

{% content-ref url="/pages/-MUHJyU\_fWf2Nr9Sz5gr" %}
[How To Create Accessible Tables](/components/tabular-data-tables-coming-soon/make-accessible-tables.md)
{% endcontent-ref %}