# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kmdesign.services.gatech.edu/components/tabular-data-tables-coming-soon.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.