So many new tags and attributes. Please explain


#1

Oh geez wow. Html 3 covers a lot but doesn't' explain some of the things. Especially on 9/16. Look




<body>

    <table style="border-collapse:collapse;">
        <thead>
            <tr>
                <th colspan="2">Famous Monsters by Birth Year</th>
            </tr>
            <tr style="border-bottom:1px solid black;">
                <th style="padding:5px;">Famous Monster</th>
                <th style="padding:5px;border-left:1px solid black;">Birth Year</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="padding:5px;">King Kong</td>
                <td style="padding:5px;border-left:1px solid black;">1933</td>     
            </tr>

            <tr>
                <td style="padding:5px;">Dracula</td>
                <td style="padding:5px;border-left:1px solid black;">1897</td>
            </tr>

            <tr>
                <td style="padding:5px;">Bride of Frankenstein</td>
                <td style="padding:5px;border-left:1px solid black;">1944</td>
            </tr>
        </tbody>
    </table>

</body>

What i want to know is what the "padding" attribute, "border-collapse:collapse",and the "border-left" do. What do they do and how can we use them.


#2

@dragonflare
This link should give a good description of padding

The border-left attribute is just the left border of any element

border-left can be used in the same way that border is used

eg. border-left: "borderWidth" "borderStyle" "borderColor"

The border-collapse attribute takes multiple borders (if there are) and it compacts them into a single border.


#3

@tamponsah9909 explanation is really good, but i would like to add a few things:

Don't bother to much about padding yet, it will be covered later in this course.

MDN (which always has great documentation) has a nice example on border-collapse, which nicely shows the difference between the default value (separate) and collapse

border displays a border on 4 sides around the element (left, right, top and bottom), border-left only gives a border on the left side. If you know what the property's do, you can always use them by adding the style attribute (or later to a stylesheet) to desired element, and use the desired property