Footer shows to different types of result when I leave parts out and I can't explain why the ou-CodePudding

I know it's my very first time here on stackoverflow, but I hope someone can help me. I'm just at the beginning of my web programming journey.

First code gives me the footer I want:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Klausur Web Programming</title>
<style type="text/css">

footer {
width: 800px;
border-top: 1px solid black;
text-align: right;
}
footer p {
text-transform: uppercase; 
</style>
</head>
<body>

<footer>
<p>web programming Klausur &copy; 2021</p>
</footer>
</body>
</html>

Second one shows more added code and a different result for the footer and I can't explain why. Where is the border-top: 1px solid;? or the text-align: right;?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Klausur Web Programming</title>
    <style type="text/css">
    .firstcol {
    font-weight: bold;
    }
    td {
    }
    border: 1px dashed black;
    footer {
    width: 800px;
    border-top: 1px solid black;
    text-align: right;
    }
    footer p {
    text-transform: uppercase; 
    }
    </style>

</head>
<body>
    <div >
    <p style="text-decoration: underline;">Hier ist die Notenliste für das aktuelle Semester:</p>
    <table>
        <tr>
            <th class=”firstcol” id=”firstcol”>Name</th>
            <th>Matrikelnummer</th>
            <th>Note</th>
        </tr>
        <tr>
            <td class=”firstcol”>Paul</td>
            <td>123456</td>
            <td>1,0</td>
        </tr>
        <tr>
            <td class=”firstcol”>Paula</td>
            <td>123457</td>
            <td>1,0</td>
        </tr>
    </table>
    </div>
<footer>
<p>web programming Klausur &copy; 2021 </p>
</footer>
</body>
</html>

Thank you

CodePudding user response：

There are some bugs in you second code. Kindly change it to this:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>Klausur Web Programming</title>
    <style type="text/css">
        .firstcol {
            font-weight: bold;
        }
        td {
            border: 1px dashed black;
        }
        footer {
            width: 800px;
            border-top: 1px solid black;
            text-align: right;
        }
        footer p {
            text-transform: uppercase; 
        }
    </style>

</head>
<body>
    <div >
        <p style="text-decoration: underline;">Hier ist die Notenliste für das aktuelle Semester:</p>
        <table>
            <tr>
                <th class=”firstcol” id=”firstcol”>Name</th>
                <th>Matrikelnummer</th>
                <th>Note</th>
            </tr>
            <tr>
                <td class=”firstcol”>Paul</td>
                <td>123456</td>
                <td>1,0</td>
            </tr>
            <tr>
                <td class=”firstcol”>Paula</td>
                <td>123457</td>
                <td>1,0</td>
            </tr>
        </table>
    </div>
    <footer>
        <p>web programming Klausur &copy; 2021 </p>
    </footer>
</body>
</html>