The Archivist

Kragor’s stomping grows louder—heavy, relentless, like a metal clockwork gone rogue. “He’s seen through our deceptions,” Tinker squeaks in panic. “We need something to stop him—or at least distract him.” Sonya looks toward the approaching chaos. “There’s only one place left—the Archivist’s office.” She sighs deeply.

Confuse Kragor with Bureaucracy

Help Tinker create a “Table of Deception” in the Archivist’s archive.
Choose the right terms to craft the perfect storm of chaos—
and gain the upper hand over Kragor.

Tables Styling Tables

Solve the task here in the console [–> Open in a new tab]

HTML

<header>
    <h1>Tables of Bureaucracy</h1>
</header>
<table>
    <thead>
        <tr>
            <th>Category</th>
            <th>Details</th>
            <th>Status</th>
            <th>Contact</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Plans</td>
            <td>Attack on <b>North Gate</b> at 03:00 (False)</td>
            <td>Published</td>
            <td rowspan="5" class="bg-colspan"><strong>Layra Nightstone</strong><br>Shadowpath 47<br>Lumina District<br>City of Aetheron</td>
        </tr>
        <tr>
            <td>Resources</td>
            <td>Transport of supplies to <b>South Base</b></td>
            <td>Cancelled</td>
        </tr>
        <tr>
            <td>Dangers</td>
            <td>Mechanical trap at location 42-A</td>
            <td>Activated</td>
        </tr>
        <tr>
            <td>Communication</td>
            <td>Frequency 149.2 (Outdated)</td>
            <td>Confusing</td>
        </tr>
        <tr>
            <td>Report</td>
            <td>Location “Shadowlight” inspected</td>
            <td>Unclear</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">"Confusion is a powerful weapon."</td>
        </tr>
    </tfoot>
</table>

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    margin: 0;
    padding: 20px;
    text-align: center;
    line-height: 1.7;
}

table {
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
    background-color: #fff;
    border: 3px solid #462c06;
}

th,
td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

thead {
    background-color: #026074;
    color: #7cdcfe;
}

tbody {
    background-color: #c0f3cb;
}

tfoot {
    background-color: #ac3b14;
    color: #fff;
    font-weight: bold;
}

.bg-colspan {
    background-color: #d7ba7d;
}

tfoot:hover {
    background-color: green;
    cursor: pointer;
}