Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

HTML Tables

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Overview of Tables

2:26 with Nick Pettit

It's very common for tables to be populated with information from a database. We're going to build a static table in plain HTML without a database, but for the sake of learning, we're going to imagine that we have a company with a few employees. Each employee will have an email address and a job role.

Resources

Throughout these videos, we'll be learning about many HTML table elements. If you'd like to learn more, be sure to read the Teacher's Notes section of each video to review vocabulary, code, and links to documentation. For starters, here's the Mozilla Developer Network documentation for the <table> element.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    The Web is filled with text and images. 0:05
    But it's also filled with information. 0:08
    Like sports scores throughout the years, lists of employee names 0:10
    and email addresses, or nutrition facts for your favorite foods. 0:14
    HTML tables enable the display of information 0:18
    in what is commonly known as tabular data. 0:21
    Which is information that's stored in a table like structure of columns and rows. 0:24
    In general, anything that you might put into a spreadsheet could go into a table. 0:30
    There are many use cases for a table. 0:36
    So it's important for you to add them to your 0:38
    skills because it's a very common method for displaying information. 0:40
    Tables are a little bit more involved 0:46
    than other HTML elements like paragraphs and images. 0:48
    Because in order to construct a table, you need to use elements to represent the 0:52
    individual table cells, the rows that contain 0:57
    those cells, as well as the table itself. 1:00
    There are also many other elements that help to 1:04
    further organize a table such as headers, footers, and more. 1:07
    It's very common for tables to 1:12
    be populated with information from a database. 1:14
    We're going to build a static table in plain HTML without a database. 1:17
    But for the sake of learning, we're going to 1:23
    imagine that we have a company with a few employees. 1:26
    Each employee will have an email address and a job role. 1:29
    To follow along with this project, click the Workspaces 1:34
    button next to this video and open the associated template. 1:37
    There should already be some starter HTML and CSS code included with your workspace. 1:41
    This will allow us to focus specifically on tables. 1:47
    If you'd like to use another text editor instead of 1:51
    Workspaces, just download the project files associated with this video. 1:54
    It's the same code that's included with Workspaces. 1:59
    One more thing I should note, included CSS will automatically 2:03
    make our table look a lot better than the browser defaults. 2:07
    If at any time you'd like to see the 2:11
    default browser styling feel free to remove the CSS. 2:13
    The CSS is not required and its just there to make this project look pretty. 2:18
    Now, if you're ready to code. 2:23
    Then, lets get started. 2:25

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up