HTML Table with Example

Duration: 12 min

This video lesson is available to enrolled students.

Enroll to watch — NTA-UGC-NET Paper - 2

AI Summary

An AI-generated summary of this video lecture.

This educational video provides a comprehensive tutorial on HTML tables, starting with the fundamental structure and tags. The instructor uses a PDF document to explain the roles of <table>, <tr>, and <td> tags, emphasizing that data cells are left-aligned by default. The lesson transitions to a practical example where a 2x2 table is coded and drawn on screen. The instructor then switches to the W3Schools online editor to demonstrate how the code renders in a browser. Key attributes for controlling table appearance, specifically cellpadding and cellspacing, are defined and visually demonstrated. The tutorial also touches upon advanced features like merging cells using colspan and rowspan, and briefly introduces HTML lists at the very end.

Chapters

  1. 0:00 – 2:00 00:00-02:00

    The session opens with a PDF document titled 'HTML Tables'. The text explains that tables allow web authors to arrange data like text, images, and links into rows and columns. The instructor highlights the core tags: <table> creates the table, <tr> creates rows, and <td> creates data cells. She notes that elements under <td> are regular and left-aligned by default. To visualize this, she draws a large red rectangle on the screen to represent the table container. Next to the drawing, she writes the hierarchy of tags: <table>, <tr>, and <td>, emphasizing the nesting structure required to build a functional table.

  2. 2:00 – 5:00 02:00-05:00

    The instructor moves to an 'Example' section within the PDF. She displays a full HTML code snippet starting with <!DOCTYPE html> and <html>. Inside the <body>, she points out the <table border='1'> tag, explaining that the border attribute makes the table visible. She highlights the <tr> tags which define the rows. Inside the first row, she identifies two <td> tags containing 'Row 1, Column 1' and 'Row 1, Column 2'. She draws a corresponding 2x2 grid on the screen, labeling the top cells 'Row 1, Column 1' and 'Row 1, Column 2'. She then highlights the second row in the code, which contains 'Row 2, Column 1' and 'Row 2, Column 2', and labels the bottom cells of her drawing accordingly.

  3. 5:00 – 10:00 05:00-10:00

    The view switches to the W3Schools 'Try it Yourself' editor. The instructor runs the code from the previous example, and the result pane displays a 2x2 table with the text 'Row 1, Column 1', 'Row 1, Column 2', 'Row 2, Column 1', and 'Row 2, Column 2'. She then returns to the PDF to discuss 'Cellpadding and Cellspacing Attributes'. The text defines cellspacing as the space between table cells and cellpadding as the distance between cell borders and the content within a cell. She also briefly introduces 'Colspan and Rowspan Attributes', explaining that colspan merges columns and rowspan merges rows.

  4. 10:00 – 12:21 10:00-12:21

    The instructor demonstrates cellpadding in the W3Schools editor. She shows code where style='padding: 10px;' is applied to <td> elements. The resulting table shows significant white space inside the cells, illustrating the padding effect. She then shows an example of rowspan where a cell labeled 'Name' spans two rows vertically. Finally, she scrolls to a new section titled 'HTML Lists', which lists three ways to specify lists: <ul> (unordered), <ol> (ordered), and <dl> (definition list), before the video concludes.

The video effectively bridges the gap between theoretical HTML syntax and practical rendering. It starts with the basic building blocks of tables, moves to a concrete coding example, and then uses an online editor to visualize the output. The explanation of spacing attributes (cellpadding and cellspacing) is crucial for styling, and the brief mention of rowspan and colspan sets the stage for more complex table layouts. The transition to HTML lists at the end suggests a broader curriculum on web page structure.