HTML Tables

HTML tables are used to display data in rows and columns.

Table Tags

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Table Attributes

border

<table border="1">
    <tr>
        <th>Header</th>
    </tr>
    <tr>
        <td>Data</td>
    </tr>
</table>

colspan and rowspan

<table border="1">
    <tr>
        <th colspan="2">Header Gabungan</th>
    </tr>
    <tr>
        <td rowspan="2">Row Data</td>
        <td>Data 1</td>
    </tr>
    <tr>
        <td>Data 2</td>
    </tr>
</table>

Case Study: Course Schedule Table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Class Schedule</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #1e40af;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>Even Semester Class Schedule 2024</h1>

    <table>
        <thead>
            <tr>
                <th>Course</th>
                <th>Credits</th>
                <th>Lecturer</th>
                <th>Room</th>
                <th>Jadwal</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Web Programming</td>
                <td>3</td>
                <td>Dr. Susanti</td>
                <td>Lab 1</td>
                <td>Senin 08:00-10:30</td>
            </tr>
            <tr>
                <td>Database</td>
                <td>3</td>
                <td>Prof. John</td>
                <td>Lab 2</td>
                <td>Selasa 10:30-13:00</td>
            </tr>
            <tr>
                <td>Algorithms</td>
                <td>3</td>
                <td>Dr. Mike</td>
                <td>Room 301</td>
                <td>Rabu 13:00-15:30</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Everyday Case Study

Case: A developer needs to display student grade data.

<h2>Academic Transcript</h2>

<table border="1">
    <tr>
        <th colspan="4">Data Student</th>
    </tr>
    <tr>
        <td>Name</td>
        <td>John Smith</td>
        <td>StudentID</td>
        <td>1234567890</td>
    </tr>
    <tr>
        <td colspan="4">Grade List</td>
    </tr>
    <tr>
        <th>Course</th>
        <th>Credits</th>
        <th>Grade</th>
        <th>Bobot</th>
    </tr>
    <tr>
        <td>Web Programming</td>
        <td>3</td>
        <td>A</td>
        <td>4.0</td>
    </tr>
    <tr>
        <td>Database</td>
        <td>3</td>
        <td>A-</td>
        <td>3.7</td>
    </tr>
</table>

Thead, Tbody, Tfoot

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Footer</td>
        </tr>
    </tfoot>
</table>

Best Practices

1. Use thead, tbody, tfoot: For correct structure
2. Caption: For table titles
3. Scope: For accessibility
4. CSS styling: Use CSS, not the border attribute
5. Responsive: For mobile

Summary

HTML tables display data in a structured format. Use CSS for styling and consider responsiveness.