Overview of Tables2: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.
Throughout these videos, we'll be learning about many HTML table elements. If you'd like to learn more, be sure to read the 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.
[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