Загрузка данных


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Успеваемость группы 3 ОВТ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="table-container">
    <div class="header-top">
        <img src="leha.jpg" alt="Учебники" class="header-img"> 
        <h1 class="main-title">Успеваемость группы 3 ОВТ</h1>
    </div>
    
    <div class="semester-header">
        За первый семестр
    </div>

    <table>
        <thead>
            <tr>
                <td rowspan="2">Студент</td>
                <th colspan="4">Предмет</th>
                <th colspan="3">Количество пропусков</th>
            </tr>
            <tr class="sub-header">
                <td>Интернет-технологии</td>
                <td>Базы данных</td>
                <td>ОПС</td>
                <td>Операционные системы</td>
                <td>Всего</td>
                <td>По уважит. причине</td>
                <td>По неуважит. причине</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="name-cell">Микаилян А.Т</td>
                <th>5</th>
                <th>5</th>
                <th>5</th>
                <th>5</th>
                <th>2</th>
                <th>0</th>
                <th>2</th>
            </tr>
            <tr>
                <td class="name-cell">Гайдулян О.Л.</td>
                <th>4</th>
                <th>4</th>
                <th>4</th>
                <th>4</th>
                <th>78</th>
                <th>67</th>
                <th>11</th>
            </tr>
        </tbody>
    </table>
</div>


.table-container {
    width: 90%;
    margin: 20px auto;
    font-family: Arial, sans-serif;
}

.logo {
width: 60px;
height: auto;
border: 1px solid #000;
margin-right: 20px;
}

.header-top {
    display: flex;
    align-items: center;  
    justify-content: center; 
    gap: 20px;             
    margin-bottom: 100px;
}

.header-img {
    width: 60px; 
    height: auto;
    border: 1px solid #ccc; 
    padding: 5px;
    float: left;
    margin-right: 1000px;
    margin-left: 0px;
}

.main-title {
    font-size: 24px;
    margin: 0;
    font-weight: bold;
    color: #000;
}


.semester-header {
    margin-bottom: 40px;
    background-color: #5cff21;
    text-align: right;
    padding: 8px 15px;
    font-weight: bold;
    border: 1px solid #777;
    border-bottom: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    border: 1px solid #777;
    padding: 10px;
    text-align: right;
    font-size: 13px;
}

td {
    border: 1px solid #777;
    padding: 10px;
    text-align: center;
    font-size: 13px;
}

thead tr:first-child th {
    background-color: #61bd40;
    color: white;
}


.sub-header th {
    background-color: #bcbcbc;
    color: black;
}

.name-cell {
    text-align: left;
}

.footer-text {
    text-align: right;
    font-size: 12px;
    margin-top: 5px;
}

table {
    width: 100%;
    border-collapse: collapse;
    border: 4px solid #60b344;
}