itochan/sugoi_timetable.css

## sugoi_timetable.css
table {
    border-collapse: collapse;
}
th, td {
    width: 120px;
    height: 60px;
    border: 1px solid black;
    text-align: center;
}

## sugoi_timetable.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>演習 時間割表を二次元配列で tableバージョン</title>
        <script src="sugoi_timetable.js"></script>
        <link href="sugoi_timetable.css" rel="stylesheet">
    </head>
    <body>
        <h1>すごい時間割 Ver.2</h1>
        <p>
            <input type="button" value="時間割を見る" onclick="showTimetable();">
        </p>
        <p>
            <table id="timetable"></table>
        </p>
    </body>
</html>

## sugoi_timetable.js
function showTimetable() {
    var totalPeriod = 6; // 曜日ごとに6限まである（人によって5だったりする）
    var timetable = [
        [ // 月曜日
            "",
            "",
            "空を飛ぶ（聴講）",
            "",
            "日本研究概論1",
            ""
        ],
        [ // 火曜日
            "",
            "",
            "",
            "",
            "",
            "村井研Archミーティング"
        ],
        [ // 水曜日
            "",
            "",
            "",
            "",
            "",
            ""
        ],
        [ // 木曜日
            "",
            "データ・ドリブン社会の創発と戦略（聴講）",
            "インターネット（聴講）",
            "村井・中澤合同研講義",
            "村井・中澤合同研講義",
            ""
        ],
        [ // 金曜日
            "",
            "都市システム論",
            "インドネシア文化論",
            "情報基礎2（SA）",
            "情報基礎2（SA）",
            ""
        ],
    ];

    var timetableElement = document.getElementById("timetable");
    var tableHtml = "<tr><th></th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th></tr>";
    for(var i = 0; i < totalPeriod; i++) {
        var period = i + 1;
        tableHtml += "<th>" + period + "</th>";
        for(var j = 0; j < timetable.length; j++) { // timetable.length: 曜日列の数
            tableHtml += "<td>" + timetable[j][i] + "</td>";
        }
        tableHtml += "</tr>";
    }

    timetableElement.innerHTML = tableHtml;
}
	table {
	border-collapse: collapse;
	}
	th, td {
	width: 120px;
	height: 60px;
	border: 1px solid black;
	text-align: center;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>演習時間割表を二次元配列で tableバージョン</title>
	<script src="sugoi_timetable.js"></script>
	<link href="sugoi_timetable.css" rel="stylesheet">
	</head>
	<body>
	<h1>すごい時間割 Ver.2</h1>
	<p>
	<input type="button" value="時間割を見る" onclick="showTimetable();">
	</p>
	<p>
	<table id="timetable"></table>
	</p>
	</body>
	</html>
	function showTimetable() {
	var totalPeriod = 6; // 曜日ごとに6限まである（人によって5だったりする）
	var timetable = [
	[ // 月曜日
	"",
	"",
	"空を飛ぶ（聴講）",
	"",
	"日本研究概論1",
	""
	],
	[ // 火曜日
	"",
	"",
	"",
	"",
	"",
	"村井研Archミーティング"
	],
	[ // 水曜日
	"",
	"",
	"",
	"",
	"",
	""
	],
	[ // 木曜日
	"",
	"データ・ドリブン社会の創発と戦略（聴講）",
	"インターネット（聴講）",
	"村井・中澤合同研講義",
	"村井・中澤合同研講義",
	""
	],
	[ // 金曜日
	"",
	"都市システム論",
	"インドネシア文化論",
	"情報基礎2（SA）",
	"情報基礎2（SA）",
	""
	],
	];

	var timetableElement = document.getElementById("timetable");
	var tableHtml = "<tr><th></th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th></tr>";
	for(var i = 0; i < totalPeriod; i++) {
	var period = i + 1;
	tableHtml += "<th>" + period + "</th>";
	for(var j = 0; j < timetable.length; j++) { // timetable.length: 曜日列の数
	tableHtml += "<td>" + timetable[j][i] + "</td>";
	}
	tableHtml += "</tr>";
	}

	timetableElement.innerHTML = tableHtml;
	}