2.4: Tables

Last updated

Mar 16, 2024
Save as PDF
- 2.3: Links
- 2.5: Multimedia

$\newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} }$

$\newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}}$

$\newcommand{\id}{\mathrm{id}}$ $\newcommand{\Span}{\mathrm{span}}$

( \newcommand{\kernel}{\mathrm{null}\,}\) $\newcommand{\range}{\mathrm{range}\,}$

$\newcommand{\RealPart}{\mathrm{Re}}$ $\newcommand{\ImaginaryPart}{\mathrm{Im}}$

$\newcommand{\Argument}{\mathrm{Arg}}$ $\newcommand{\norm}[1]{\| #1 \|}$

$\newcommand{\inner}[2]{\langle #1, #2 \rangle}$

$\newcommand{\Span}{\mathrm{span}}$

$\newcommand{\id}{\mathrm{id}}$

$\newcommand{\Span}{\mathrm{span}}$

$\newcommand{\kernel}{\mathrm{null}\,}$

$\newcommand{\range}{\mathrm{range}\,}$

$\newcommand{\RealPart}{\mathrm{Re}}$

$\newcommand{\ImaginaryPart}{\mathrm{Im}}$

$\newcommand{\Argument}{\mathrm{Arg}}$

$\newcommand{\norm}[1]{\| #1 \|}$

$\newcommand{\inner}[2]{\langle #1, #2 \rangle}$

$\newcommand{\Span}{\mathrm{span}}$ $\newcommand{\AA}{\unicode[.8,0]{x212B}}$

$\newcommand{\vectorA}[1]{\vec{#1}} % arrow$

$\newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow$

$\newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} }$

$\newcommand{\vectorC}[1]{\textbf{#1}}$

$\newcommand{\vectorD}[1]{\overrightarrow{#1}}$

$\newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}}$

$\newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}}$

$\newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} }$

$\newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}}$

$\newcommand{\avec}{\mathbf a}$

$\newcommand{\bvec}{\mathbf b}$

$\newcommand{\cvec}{\mathbf c}$

$\newcommand{\dvec}{\mathbf d}$

$\newcommand{\dtil}{\widetilde{\mathbf d}}$

$\newcommand{\evec}{\mathbf e}$

$\newcommand{\fvec}{\mathbf f}$

$\newcommand{\nvec}{\mathbf n}$

$\newcommand{\pvec}{\mathbf p}$

$\newcommand{\qvec}{\mathbf q}$

$\newcommand{\svec}{\mathbf s}$

$\newcommand{\tvec}{\mathbf t}$

$\newcommand{\uvec}{\mathbf u}$

$\newcommand{\vvec}{\mathbf v}$

$\newcommand{\wvec}{\mathbf w}$

$\newcommand{\xvec}{\mathbf x}$

$\newcommand{\yvec}{\mathbf y}$

$\newcommand{\zvec}{\mathbf z}$

$\newcommand{\rvec}{\mathbf r}$

$\newcommand{\mvec}{\mathbf m}$

$\newcommand{\zerovec}{\mathbf 0}$

$\newcommand{\onevec}{\mathbf 1}$

$\newcommand{\real}{\mathbb R}$

$\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}$

$\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}$

$\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}$

$\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}$

$\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}$

$\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}$

$\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}$

$\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}$

$\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}$

$\newcommand{\laspan}[1]{\text{Span}\{#1\}}$

$\newcommand{\bcal}{\cal B}$

$\newcommand{\ccal}{\cal C}$

$\newcommand{\scal}{\cal S}$

$\newcommand{\wcal}{\cal W}$

$\newcommand{\ecal}{\cal E}$

$\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}$

$\newcommand{\gray}[1]{\color{gray}{#1}}$

$\newcommand{\lgray}[1]{\color{lightgray}{#1}}$

$\newcommand{\rank}{\operatorname{rank}}$

$\newcommand{\row}{\text{Row}}$

$\newcommand{\col}{\text{Col}}$

$\renewcommand{\row}{\text{Row}}$

$\newcommand{\nul}{\text{Nul}}$

$\newcommand{\var}{\text{Var}}$

$\newcommand{\corr}{\text{corr}}$

$\newcommand{\len}[1]{\left|#1\right|}$

$\newcommand{\bbar}{\overline{\bvec}}$

$\newcommand{\bhat}{\widehat{\bvec}}$

$\newcommand{\bperp}{\bvec^\perp}$

$\newcommand{\xhat}{\widehat{\xvec}}$

$\newcommand{\vhat}{\widehat{\vvec}}$

$\newcommand{\uhat}{\widehat{\uvec}}$

$\newcommand{\what}{\widehat{\wvec}}$

$\newcommand{\Sighat}{\widehat{\Sigma}}$

$\newcommand{\lt}{<}$

$\newcommand{\gt}{>}$

$\newcommand{\amp}{&}$

$\definecolor{fillinmathshade}{gray}{0.9}$

In this section, we provide guidelines and recommendations for formatting tables.

What are tables?

In this context, tables refer to data tables, which include row and/or column header information to categorize content. (Tables that do not have headers are called layout tables.)

File types include: DOCX, HTML, PDF

Are your tables simple or complex?

A simple table includes a maximum of one header column and/or one header row. A complex table includes more than one header column and/or header row, and may include merged or split cells.^[1]

We recommend you make every effort to keep data tables as simple in structure as possible. The more complex the design of a data table, the less accessible it will be for some students using screen-reading technology to access their textbook materials. Screen readers move left-to-right, top-to-bottom, one cell at a time, and because a screen reader does not repeat a cell, merging or splitting cells can affect the reading order of a table.

However, you can use merged or split table cells if they are formatted correctly. Check out this web page to learn more: Tables Concepts

Who are you doing this for?

This work supports students who:

Have a form of cognitive disability, like Ann
Are blind or have low vision, like Jacob

Ann has a learning disability that makes it difficult for her to concentrate.

What do you need to do?

In the same way that your content hierarchy needs headings and structure (see Organizing Content), tables need a properly defined structure to be accessible. This means that you must add row and column headers to define the different sections of data. Screen readers read tables horizontally—cell by cell, row by row—and row and column headers help give context to the data in each cell for students who are blind, have low vision, or have a cognitive disability.

Create simple tables

A simple table includes:

A table title or caption
Maximum of one row of column headers and/or maximum of one column of row headers, with the appropriate scope assigned
Avoid using merged or split cells
Adequate cell padding for visual learners

Example 1: How to Create a Simple Table

The table below is a simple table. Reviewed against the preceding requirements list, this table:

Includes a caption (Spring Blossoms)
Has one row in which cells are tagged as column headers (Colour Family, Bulbs, Shrubs, Trees), and one column (beginning on the second row) in which the cells are tagged as row headers (Pink, Yellow)
Avoids the use of merged or split cells wherever possible
Has adequate cell padding to provide space buffering around the data in each cell. (Cell padding in this table is set at “10”).

Spring Blossoms
Colour Family	Bulbs	Shrubs	Trees
Pink	Tulips	Flowering currant	Ornamental plum
Yellow	Daffodils	Forsythia	Star magnolia

For a student accessing the table through a screen reader, the first row of data following the column headers will be presented along the lines of:

Row 2, Colour family, column 1, Pink
Bulbs, column 2, Tulips
Shrubs, column 3, Flowering currant
Trees, column 4, Ornamental plum

Marking cells in the first row and/or column of a table as header cells allows a screen reader to interpret the structure of a table and how cells relate to each other. This, in turn, ensures that someone using a screen reader can navigate through a table and understand what column/row a given cell is in. If a table doesn’t have headers, the screen reader will recite cell information starting in the upper left corner and continuing left to right, top to bottom.

How to mark cells and rows as headers

As with section headings, it is not enough to bold or enlarge text in table cells that you want to be marked as headers.

If you are familiar with HTML, you can go into the text editor and change tags to tags. Row-header tags are given the scope="row" attribute and column-header tags get a scope="col" attribute.^[2]

For those not comfortable with HTML, here is how you create table row and column headers in LibreTexts

Tables are adding by via the menu "Elements" in toolbar and selecting Table of directly via the editor toolbar (see below).

Figure $\PageIndex{1}$ : How to add a table from the editing tool bar.

You can choose the number of rows and columns you need (can be changed later). This gives you an empty table structure that you can start to fill out. If you want to delete a row, select an entry in the row you want to delete and click on the x that appears to the left. If you want to add a row above or below, you can do that by clicking the > that appears above or below the x respectively.

If you are copying a table from a website you will likely be able to copy its structure via a simple copy-paste.

Right click on the table and select table properties. Here you can choose whether the first row and/or column is headings and add a caption to the table. Making the first row/column headings is useful for screen readers and strongly recommended if possible. Allow table to be responsive, this ensures proper viewing on all types of viewing devices.

Figure $\PageIndex{2}$ : Table properties for Libretexts tables.

Always be Responsive

It is a good idea to select the "make table responsive" section (see Figure $\PageIndex{2}$ ) of any new table so that it will be easily viewable on mobile devices and computers.

Add a [Skip Table] option

For large data tables, it can be a good idea to add an anchor below the table which will allow people to skip the content of the table. See Table 2.4 for an example.

Table 2.4. Main Sociological Research Methods [Skip Table]
Method	Implementation	Advantages	Challenges
Survey	Questionnaires and interviews	Yields many responses, can survey a large sample, data can be generalized, and quantitative data are easy to chart.	Can be time consuming, can be difficult to encourage participant response, and captures what people think and believe, but not necessarily how they behave in real life.
Fieldwork	Observation, participant observation, ethnography, case study.	Yields detailed, accurate, and real-life information.	Time consuming, data are often descriptive and not conducive to generalization, researcher bias is difficult to control for, qualitative data are difficult to organize.
Experiment	Deliberate manipulation of social customs and mores.	Tests cause-and-effect relationships.	Hawthorne effect, artificial conditions of research, and ethical concerns about people’s well-being.
Secondary data analysis	Analysis of government data (census, health, crime statistics), research of historic documents, and content analysis.	Makes good use of previous sociological information.	Data could be focused on a purpose other than yours, data can be hard to find, and taking into account the historical or cultural context of texts.

As shown, this link is best placed in the table caption. That way, someone using a screen reader will hear the caption of the table before being given the option to skip the table.

For more information about creating same page links in LibreTexts see Anchors in the LibreTexts Construction Guide

Media Attributions

Table 2.4. “Main Sociological Research Methods” in Introduction to Sociology – 2nd Canadian Edition by William Little. © Creative Commons Attribution 4.0 International Licence.

Penn State, "Tables," Accessibility, accessed March 28, 2018, http://accessibility.psu.edu/tables. ↵
"Tables with Two Headers," Web Accessibility Tutorials, accessed January 17, 2018, https://www.w3.org/WAI/tutorials/tables/two-headers/. ↵

Search

Text Color

Text Size

Margin Size

Font Type

Example 1: How to Create a Simple Table

What are tables?

Are your tables simple or complex?

Who are you doing this for?

What do you need to do?

Create simple tables

Example 1: How to Create a Simple Table

How to mark cells and rows as headers

Always be Responsive

Add a [Skip Table] option

Media Attributions

Support Center

How can we help?