Learn HTML tables in 3 minutes 📊

Summary

In this video, the creator demonstrates how to build an HTML table for displaying a store's hours of operation. Starting with basic table structure using `<table>`, `<tr>`, `<th>`, and `<td>` tags, they show how to create rows, headers, and data cells. The example focuses on a brick-and-mortar store's schedule, open Monday through Friday, 9 to 5, and closed on weekends. The tutorial also covers styling the table with background colors, centering text, and adjusting cell widths. The video ends with a call to like, comment, and subscribe.

Takeaways

• 😀 The video demonstrates how to create a table using HTML.
• 🖥️ A table in HTML is created using a pair of table tags: an opening <table> tag and a closing </table> tag.
• 📅 Rows in a table are added using <tr> tags, and columns or cells within those rows are created using <th> for headers and <td> for data.
• 📅 The example used in the video involves creating a store's hours of operation table, with the first row representing the days of the week and the second row showing the hours of operation.
• 🔠 Table headers (<th>) are inherently bold in HTML.
• 📋 To insert data into the table's rows, use the <td> (table data) tags.
• 🎨 Background colors for the rows can be set using the 'bgcolor' attribute within the <tr> tags, allowing for visual distinction between rows.
• 🔳 Cells can be centered by using the 'align' attribute with the value 'center' inside the <tr> tag.
• 📏 Uniform cell width can be achieved by setting a width for each cell (e.g., 100 pixels) and adjusting the overall table width accordingly.
• 👍 The video wraps up with instructions to like, comment, and subscribe for more tutorials.

Q & A

What is the main topic of the video?

The main topic of the video is how to create a table using HTML.

What is the purpose of creating a table in the video?

The purpose is to represent the hours of operation for a brick and mortar store on their website.

What HTML tags are used to create a table?

The HTML tags used to create a table are 'table' for the opening and closing tags.

How are rows added to a table in HTML?

Rows are added to a table using 'tr' tags for table rows.

What tags are used for headers in a table?

Headers in a table are created using 'th' tags for table header.

What is the content of the first row in the example table?

The first row lists the days of the week from Sunday to Saturday.

What tags are used for adding data to a cell in the table?

Data in a cell is added using 'td' tags for table data.

How is the color of a row changed in the table?

The color of a row is changed using the 'bgcolor' attribute within the opening 'tr' tag.

How can the text in table cells be centered?

The text in table cells can be centered by setting the 'align' attribute to 'center' within the opening 'tr' tag.

What attribute is used to set the width of table cells?

The width of table cells is set using the 'width' attribute within the opening 'table' tag.

What is the final step to ensure all cells are aligned and of the same size?

The final step is to set the width of the opening 'table' tag to the width of each cell times the number of cells.

How can viewers show appreciation for the video?

Viewers can show appreciation by liking the video, leaving a comment, and subscribing.