Learn HTML tables in 3 minutes 📊

Bro Code
24 Aug 202103:58

Summary

TLDRIn 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.

Outlines

plate

Cette section est réservée aux utilisateurs payants. Améliorez votre compte pour accéder à cette section.

Améliorer maintenant

Mindmap

plate

Cette section est réservée aux utilisateurs payants. Améliorez votre compte pour accéder à cette section.

Améliorer maintenant

Keywords

plate

Cette section est réservée aux utilisateurs payants. Améliorez votre compte pour accéder à cette section.

Améliorer maintenant

Highlights

plate

Cette section est réservée aux utilisateurs payants. Améliorez votre compte pour accéder à cette section.

Améliorer maintenant

Transcripts

plate

Cette section est réservée aux utilisateurs payants. Améliorez votre compte pour accéder à cette section.

Améliorer maintenant
Rate This
★
★
★
★
★

5.0 / 5 (0 votes)

Étiquettes Connexes
HTML TutorialWeb DevelopmentTable CreationStore HoursCoding BasicsWeb DesignHTML TagsCSS StylingEducational VideoTech Tips
Besoin d'un résumé en anglais ?