itochan/assignment.css

## assignment.css
table {
    border-collapse: collapse;
}
th, td {
    width: 30px;
    border: 1px solid black;
}

## assignment.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第4回課題</title>
        <script src="assignment.js"></script>
        <link href="assignment.css" rel="stylesheet">
    </head>
    <body>
        <h1>2019年11月のカレンダー</h1>
        <p>
            <input type="button" value="カレンダーを表示する" onclick="showCalendar();">
        </p>
        <table>
            <tbody id="calendar"></tbody>
        </table>
    </body>
</html>

## assignment.js
function showCalendar() {
    const calendar = document.getElementById("calendar");
    calendar.innerHTML = "<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>";
    let tableHtml = "";
    let day = 1;
    const dayOffset = 5;
    for (let i = 0; i < 49; i++) {
        if (i % 7 == 0) {
            tableHtml += "<tr>";
        }
        if (i < dayOffset) {
            tableHtml += `<td></td>`;
        } else {
            tableHtml += `<td>${day}</td>`;
            day++;
        }
        if (i % 7 == 6) {
            tableHtml += "</tr>";
        }
        if (day > 30) {
            break;
        }
    }
    calendar.innerHTML += tableHtml;
}
	table {
	border-collapse: collapse;
	}
	th, td {
	width: 30px;
	border: 1px solid black;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>第4回課題</title>
	<script src="assignment.js"></script>
	<link href="assignment.css" rel="stylesheet">
	</head>
	<body>
	<h1>2019年11月のカレンダー</h1>
	<p>
	<input type="button" value="カレンダーを表示する" onclick="showCalendar();">
	</p>
	<table>
	<tbody id="calendar"></tbody>
	</table>
	</body>
	</html>
	function showCalendar() {
	const calendar = document.getElementById("calendar");
	calendar.innerHTML = "<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>";
	let tableHtml = "";
	let day = 1;
	const dayOffset = 5;
	for (let i = 0; i < 49; i++) {
	if (i % 7 == 0) {
	tableHtml += "<tr>";
	}
	if (i < dayOffset) {
	tableHtml += `<td></td>`;
	} else {
	tableHtml += `<td>${day}</td>`;
	day++;
	}
	if (i % 7 == 6) {
	tableHtml += "</tr>";
	}
	if (day > 30) {
	break;
	}
	}
	calendar.innerHTML += tableHtml;
	}