H5/1 - Tables Flashcards
Learn how to use tables in HTML
What is a table, and what is it used for?
A table is a structured set of data made up of rows (horizontal) and columns (vertical) (tabular data). A table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example a person and their age, or a day of the week, or the timetable for a local swimming pool.
https://shorturl.at/zwbS2
https://shorturl.at/hkFgb
Tables are very commonly used in human society, and have been for a long time, as evidenced by this US Census document from 1800: https://shorturl.at/Rgzmo
It is therefore no wonder that the creators of HTML provided a means by which to structure and present tabular data on the web.
How does a table work?
The point of a table is that it is rigid. Information is easily interpreted by making visual associations between row and column headers. This is very useful when displaying data such as stock quotes, financial information, travel schedules, train schedules, bus schedules, travel reports, or sport scores.
When implemented correctly, HTML tables are handled well by accessibility tools such as screen readers, so a successful HTML table should enhance the experience of sighted and visually impaired users alike.
What are the HTML elements used to create and handle tabular data?
HTML provides some viable options to structure a table. There are 10 table elements, as follow:
<caption> Specifies the caption (or title) of a table.
<col></col> Defines one or more columns in a column group represented by its implicit or explicit parent <colgroup> element. The <col></col> element is only valid as a child of a <colgroup> element that has no span attribute defined.
<colgroup> Defines a group of columns within a table.
<table> Represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
<tbody> Encapsulates a set of table rows (<tr> elements), indicating that they comprise the body of a table's (main) data.
<td> A child of the <tr> element, it defines a cell of a table that contains data (table cell).
<tfoot> Encapsulates a set of table rows (<tr> elements), indicating that they comprise the foot of a table with information about the table's columns. This is usually a summary of the columns, e.g., a sum of the given numbers in a column.
<th> A child of the <tr> element, it defines a cell as the header of a group of table cells (table header cell for heading). The nature of this group can be explicitly defined by the scope and headers attributes.
<thead> Encapsulates a set of table rows (<tr> elements), indicating that they comprise the head of a table with information about the table's columns. This is usually in the form of column headers (<th> elements).
<tr> Defines a row of cells in a table (table row). The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.
</th></td></tr></th></tr></thead></tr></th></tr></tfoot></tr></td></tr></tbody></table></colgroup></colgroup></colgroup></caption>
How do we format tables?
Formatting is done with CSS. HTML is used only for semantic and structural logical markup, which stays true for tables aswell. Tables in HTML do not provide any formatting options. All attributes for formatting from old HTML, except for the border attribute (=”1” or =”0”), are no longer supported by the current standard HTML version. So tables should be formatted using CSS.
For tables to be effective on the web, you need to provide some styling information with CSS, as well as good solid structure with HTML. In this module we are focusing on the HTML part
When should you NOT use HTML tables?
HTML tables should be used for tabular data — this is what they are designed for. Unfortunately, a lot of people used to use HTML tables to lay out web pages, e.g. one row to contain the header, one row to contain the content columns, one row to contain the footer, etc. You can find more details and an example at Page Layouts in our Accessibility Learning Module: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#page_layouts:~:text=to%20describe%20them.-,Page%20layouts,-In%20the%20bad
This was commonly used because CSS support across browsers used to be terrible; table layouts are much less common nowadays, but you might still see them in some corners of the web.
In short, using tables for layout rather than CSS layout techniques is a bad idea. The main reasons are as follows:
1 - Layout tables reduce accessibility for visually impaired users: screen readers, used by blind people, interpret the tags that exist in an HTML page and read out the contents to the user. Because tables are not the right tool for layout, and the markup is more complex than with CSS layout techniques, the screen readers’ output will be confusing to their users.
2 - Tables produce tag soup: As mentioned above, table layouts generally involve more complex markup structures than proper layout techniques. This can result in the code being harder to write, maintain, and debug.
3 - Tables are not automatically responsive: When you use proper layout containers (such as <header>, <section>, <article>, or <div>), their width defaults to 100% of their parent element. Tables on the other hand are sized according to their content by default, so extra measures are needed to get table layout styling to effectively work across a variety of devices.
How to create a simple table using <table>, <tr> and <td>?
Every table in HTML is created between <table> and </table>.
The contents of the table are written row by row: <–>. The beginning of a row must contain an opening <tr>, and the end of the row ends with </tr>.
Within a table row between <tr> and </tr>, you write the individual cells (or also columns) with <td> and </td>. td stands for table data and is the smallest container inside a table.
If we want a row of 4 cells, that means we need <tr> </tr> to define the row first. Then, in this row, we need 4 “blocks” or cells, which means we’ll need 4 <td> child elements:
<table>
<tr>
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
</tr>
</table>
As you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. Each <td> element creates a single cell and together they make up the first row. Every cell we add makes the row grow longer.
To stop this row from growing and start placing subsequent cells on a second row, we need to use the <tr> element (‘tr’ stands for ‘table row’), as we did above.
From here on, every row you will make needs to be wrapped in an additional <tr> element. Leaving out the <tr> elements will infinitely add columns next to each others. The result is as follows:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics#result:~:text=%3Ctd%3E.-,Result,-This%20should%20result
How to add headers to a table to use cells or columns as headers of a table?
You place the data between <th> and </th> (table heading). q
You can use the th element the same way as the td element; place it inside the <tr> element. The only difference is that this column will now be interpreted as a heading since <th> denotes a header, not a normal cell. Also, the browser usually highlights this element with a bold font centered in the column.
By using table headings, you can make column and row headings stand out, which will make it much easier and clearer. You can technically use <td> elements with special markup to indicate headings in a table, but this is not as semantic as using dedicated <th> elements. Using th, table headers are recognized as headers both visually and semantically.
Tables headers also have an added benefit — along with the scope attribute (which we’ll learn about later), they allow you to make tables more accessible by associating each header with all the data in the same row or column. Screen readers are then able to read out a whole row or column of data at once, which is pretty useful.
What if you wanted to use an empty cell without content?
Specify an empty <td> or <th>; otherwise the table won’t be displayed correctly. In old web browsers, you can also write a forced space with the HTML entity in the cell to be on the safe side because there could be problems with empty cells.
What attributes are used for combining columns and rows?
To combine (span) cells across multiple cells, use colspan and rowspan (as attributes of <td> or <th>). Based on the numerical value of these attributes the number of cells you want to merge is specified (both attributes accept a unitless number value, which equals the number of rows or columns you want spanned)
colspan –> group columns together (HORIZONTAL). Keep in mind that you need to reduce the number of cells if, for example, you combine a colspan across two cells.
rowspan –> group rows together (VERTICAL). Again here, make sure of the space taken by expanding rows.
<tr> and its attributes?
</tr>
The <tr> HTML element defines a row of cells in a table. The row’s cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.
There are no attributes for the table row.
Usage notes for this element:
- The <tr> element is valid as a child of a <thead>, <tbody>, or <tfoot> element only.
- If the <tr> is placed as a direct child of its parent <table> element, the <tbody> parent is implied and browsers will add the <tbody> to the markup.
- The implied <tbody> parent is only supported if the <table> otherwise has no child <tbody> elements, and only if the <tr> is included after any <caption>, <colgroup>, and <thead> elements.
- The CSS pseudo-classes :nth-of-type, :first-of-type, and :last-of-type are often useful for selecting the desired set of rows and their data and header cells (<td> and <th> elements).
- When a <tr> is included as a direct child of the <table>, as the browser adds a <tbody> to the markup, CSS selectors such as table > tr may not work as expected or at all.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr#:~:text=or%20at%20all.-,Examples,-See%20%3Ctable%3E
<table> element and its attributes?
</table>
The <table> HTML element represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
Only one supported attribute: border, to indicate a border. The value can be “1” or “”. CSS is the better option though. Other attributes have been depricated.
The <table> box establishes a table formatting context. Elements inside the <table> generate rectangular boxes. Each box occupies a number of table cells according to the following rules:
1 - The row boxes fill the table in the source code order from top to bottom. Each row box occupies one row of cells.
2 - A row group box occupies one or more row boxes.
3 - Column boxes are placed next to each other in source code order. Depending on the value of the dir attribute, the columns are laid in left-to-right or right-to-left direction. A column box occupies one or more columns of table cells.
4 - A column group box occupies one or more column boxes.
5 - A cell box may span over multiple rows and columns. User agents trim cells to fit in the available number of rows and columns.
Table cells do have padding. Boxes that make up a table do not have margins.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#:~:text=Table%20layers%20and%20transparency
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#examples:~:text=W3C%20WCAG%202.0-,Examples,-The%20examples%20below
<th> and <td> elements and their attributes?
</td></th>
<th> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
<td> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
They have three attributes:
colspan
rowspan
scope, which is used with a table heading to specify whether it should apply to a column (scope="col") or a row (scope="row").
The scope attribute on header cells (<th> elements) is redundant in simple contexts, because scope is inferred. However, some assistive technologies may fail to draw correct inferences, so specifying header scope may improve user experiences. In complex tables, scope can be specified to provide necessary information about the cells related to a header.
</th></td></th>
Complicated tables
Assistive technologies such as screen readers may have difficulty parsing tables that are so complex that header cells can’t be associated in a strictly horizontal or vertical way. This is typically indicated by the presence of the colspan and rowspan attributes.
Ideally, consider alternate ways to present the table’s content, including breaking it apart into a collection of smaller, related tables that don’t have to rely on using the colspan and rowspan attributes. In addition to helping people who use assistive technology understand the table’s content, this may also benefit people with cognitive concerns who may have difficulty understanding the associations the table layout is describing.
If the table cannot be broken apart, use a combination of the id and headers attributes to programmatically associate each table cell with the header(s) (<th> elements) the cell is associated with.
What are the elements used for structuring tables?
<thead> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
<tbody> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
<tfoot> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot
Divide the table into a table head (thead), in which using th elements make sense.
Mark the actual data of the table using tbody.
And if you want to write a range as a table foot, enclose it with the tfoot element.
These elements are purely semantic and do not replace the <tr> element. Instead, they surround the tr element, in which the td and th elements are found.
Using these elements, the browser is able to reproduce the order of the table correctly on its own.
</tr></tfoot></tbody></thead>
