作成したテーブル

コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>月間スケジュール</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>月曜日</th>
                <th>火曜日</th>
                <th>水曜日</th>
                <th>木曜日</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>会議</td>
                <td>打ち合わせ</td>
                <td>プレゼン</td>
                <td>研修</td>
            </tr>
            <tr>
                <td>資料作成</td>
                <td>メール対応</td>
                <td>面談</td>
                <td>出張</td>
            </tr>
            <tr>
                <td>報告書</td>
                <td>企画会議</td>
                <td>顧客訪問</td>
                <td>休暇</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

table {
    border-collapse: collapse;
}

th {
    width: 100px;
    height: 60px;
    border: 2px solid #353535;
    text-align: center;
    background-color: #353535;
    color: white;
    font-weight: bold;
}

td {
    width: 100px;
    height: 60px;
    border: 2px solid #575757;
    color: #575757;
    font-weight: bold;
    text-align: center;
    background-color: #f5f5f5;
}

/* 余白のためのCSS */

thead {
  position: relative;
}

thead::after {
  content: "";
  display: block;
  height: 8px;
  background-color: transparent;
}