Source: https://developers.google.com/style/tables ↗\n\n# Tables

  Stay organized with collections



  Save and categorize content based on your preferences.\n\n- Home\n- Products\n- Style\n\n\n## Page Summary\n\n- Tables are ideal for presenting data with three or more related pieces of information per item, while lists are better for simpler data structures.\n- When using tables, introduce them with a complete sentence, use clear and concise column headings, and avoid unnecessary styling or formatting.\n- Ensure table accessibility by using proper HTML elements like caption, th, and scope, and provide descriptive alternative text for any images or symbols.\n- For single-unit items, use bulleted, lettered, or numbered lists; for paired data, consider description lists or tables depending on the context.\n- Avoid using tables for page layout, code snippets, long one-dimensional lists, or within numbered procedures, and ensure responsiveness for various viewport sizes.\n\nTables are ideal for presenting data with three or more related pieces of information per item, while lists are better for simpler data structures.\n\nWhen using tables, introduce them with a complete sentence, use clear and concise column headings, and avoid unnecessary styling or formatting.\n\nEnsure table accessibility by using proper HTML elements like caption, th, and scope, and provide descriptive alternative text for any images or symbols.\n\nFor single-unit items, use bulleted, lettered, or numbered lists; for paired data, consider description lists or tables depending on the context.\n\nAvoid using tables for page layout, code snippets, long one-dimensional lists, or within numbered procedures, and ensure responsiveness for various viewport sizes.\n\nIn many contexts, tables are the best way to represent sets of related pieces of data. However,

in some contexts, other approaches are better choices.\n\n\n## List or table?\n\nTables and lists are both ways to present a set of similarly structured items; sometimes it’s not obvious when to choose one presentation over the other. To decide which presentation to use, consult the following table:\n\n\nItem type | Example | How to present\nEach item is a single unit. | A list of programming language names, or a list of steps to follow. | Use a numbered list, lettered list, or bulleted list.\nEach item is a pair of pieces of related data. | A list of term/definition pairs. | Use a description list (or, in some contexts, a table).\nEach item is three or more pieces of related data. | A set of parameters, where each parameter has a name, a data type, and a description. | Use a table.\n\n\n### Places not to use tables\n\n- Don’t use tables to lay out a page; use your site’s standard CSS instead.\n- Usually if you have only one row of material, a table isn’t the best choice for how to present it. But in some contexts (especially for consistency of layout in reference documentation), it might be.\n- If you have only one column in your table, turn the table into a list.\n- Don’t use tables to lay out code snippets.\n- Don’t use tables to lay out long one-dimensional lists in multiple columns. For example, if you have a long list of function names, don’t try to save space by splitting the list in half and presenting the two halves as a two-column table. Use tables only to present two-dimensional data—that is, material that semantically makes sense to display in rows and columns.\n- Avoid tables in the middle of a numbered procedure.\n\n\n## Multi-paragraph table cells\n\nAny table cell can contain more than one paragraph.\n\nTo create multiple paragraphs, use the p element rather than using the br element. (The HTML specification describes which uses of the br element are legitimate and which aren’t.)\n\nExample of a table with some cells that contain more than one paragraph:\n\n\nAttribute name | Type | Description\nhref | HTML | Defines the URL for a link. For example, go to the Google Search page.\nsrc | HTML | Defines the path of the image to be displayed. For example, .\n\nDefines the URL for a link.\n\nFor example, go to the Google Search page.\n\nDefines the path of the image to be displayed.\n\nFor example, .\n\n\n## Introductory sentences for tables\n\nIntroduce tables with a complete sentence that describes the purpose of the table because not all screen readers preannounce tables. The introductory sentence can end with a colon or a period; usually a colon if it immediately precedes the table, and usually a period if there’s more material (such as a note paragraph) between the introduction and the table.\n\nRecommended: Change the environment variables to values for your deployment, as listed in the following table:\n\nFor more information, see the Tables section of the “Accessibility” page.\n\n\n## Table placement\n\n- When introducing a table, use a complete sentence and try to refer to the table’s position, using a phrase like the following table or the preceding table.\n- Don’t put a table in the middle of a sentence.\n- Avoid using footnotes when possible. If your table does refer to footnotes, place them immediately following the table. For more information, see Footnotes.\n\n\n## Table captions\n\nIf your document contains only one table, the table doesn’t need a caption. However, be sure to place the table adjacent to the text that refers to it.\n\nIf your document contains more than one table in fairly close proximity to each other, include a caption for each one, using a caption element as the first child of the table element. Start the caption with a number, in the form “Table NUMBER. DESCRIPTION”. Use sentence case for the caption, but don’t place a period at the end.\n\nWhen referring to the table from text, refer to it by its number—for example, … as shown in table 2. Do not capitalize table unless it starts a sentence.\n\nYour site’s CSS determines the styling and placement of the caption.\n\nRecommended:\n\n```\n