Creating a Basic Table

There are three elements that every table must contain: table, tr, and td. There are other elements—and I’ll explain them later in this chapter—but these are the three you must start with. The first, table, is at the heart of support for tabular content in HTML and denotes a table in an HTML document. The next core table element is tr, which denotes a table row. HTML tables are row-oriented rather than column-oriented and you must denote each row separately. The last of our three core elements is td, which denotes a table cell. Having defined these three elements, you can combine them to create tables, as shown below.https://stackblitz.com/edit/web-platform-qfbdak?embed=1&file=index.html&hideDevTools=1&hideExplorer=1&hideNavigation=1

In this example we have defined a table element that has two rows (denoted by the two tr elements). Each row has three columns, each of which is represented by a td element. The td element can contain any flow content. This is a very simple table, but you can see the basic structure. The browser is responsible for sizing the rows and columns to maintain the table.  As an example, see what happens when we add some longer content below.https://stackblitz.com/edit/web-platform-9jxmhv?embed=1&file=index.html&hideDevTools=1&hideExplorer=1&hideNavigation=1

The content of each of the newly added td elements is longer than in the previous two rows. You can see how the browser resizes the other cells to make them the same size. One of the nicest features of the table element is that you don’t have to worry about the sizing issues. The browser makes sure that the columns are wide enough for the longest content and that the rows are tall enough for the tallest cell.

---