Key Concepts

Review core concepts you need to learn to master this subject

<tr> Table Row Element

<td> Table Data Element

<thead> Table Head Element

rowspan Attribute

<tbody> Table Body Element

<th> Table Heading Element

colspan Attribute

<tfoot> Table Footer Element

See more

<tr> Table Row Element

<table>
  <tr>
    ...
  </tr>
</table>

The table row element, <tr>, is used to add rows to a table before adding table data and table headings.

HTML Tables
Lesson 1 of 1
  1. 1
    Introduction to Tables
    There are many websites on the Internet that display information like stock prices, sports scores, invoice data, and more. This data is naturally tabular in nature, meaning that a table is often th…
    Start
  2. 2
    Create a Table
    Before displaying data, we must first create the table that will contain the data by using the element. The element will contain all of the tabular data we plan on displaying.
    Start
  3. 3
    Table Rows
    In many programs that use tables, the table is already predefined for you, meaning that it contains the rows, columns, and cells that will hold data . In HTML, all of these components must be crea…
    Start
  4. 4
    Table Data
    Rows aren’t sufficient to add data to a table. Each cell element must also be defined. In HTML, you can add data using the table data element: . 73 81 In the example a…
    Start
  5. 5
    Table Headings
    Table data doesn’t make much sense without titles to describe what the data represents. To add titles to rows and columns, you can use the table heading element: . The table heading element is…
    Start
  6. 6
    Table Borders
    So far, the tables you’ve created have been a little difficult to read because they have no borders. In older versions of HTML, a border could be added to a table using the border attribute and s…
    Start
  7. 7
    Spanning Columns
    What if the table contains data that spans multiple columns? For example, a personal calendar could have events that span across multiple hours, or even multiple days. Data can span columns using…
    Start
  8. 8
    Spanning Rows
    Data can also span multiple rows using the rowspan attribute. The rowspan attribute is used for data that spans multiple rows (perhaps an event goes on for multiple hours on a certain day). It acc…
    Start
  9. 9
    Table Body
    Over time, a table can grow to contain a lot of data and become very long. When this happens, the table can be sectioned off so that it is easier to manage. Long tables can be sectioned off using …
    Start
  10. 10
    Table Head
    In the last exercise, the table’s headings were kept inside of the table’s body. When a table’s body is sectioned off, however, it also makes sense to section off the table’s column headings using …
    Start
  11. 11
    Table Footer
    The bottom part of a long table can also be sectioned off using the element. Quarter Revenue Costs Q1 $10M $7.5M …
    Start
  12. 12
    Styling with CSS
    Tables, by default, are very bland. They have no borders, the font color is black, and the typeface is the same type used for other HTML elements. CSS…
    Start
  13. 13
    Review
    Great job! In this lesson, we learned how to create a table, add data to it, and section the table into smaller parts that make it easier to read. Let’s review what we’ve learned so far: - The …
    Start

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo