Javascriptを使わずCSSだけでタブ切り替えのタイムテーブルを作るソース
参考サイト:【CSS】CSSだけでタブ切り替えを作る方法 - bagelee(ベーグリー)
<style type="text/css">
<!--
#timetable{font-size:0;}
.content{display:none;}
.check{display:none;}
#check1:checked ~ #check1_content,
#check2:checked ~ #check2_content,
#check3:checked ~ #check3_content,
#check4:checked ~ #check4_content,
#check5:checked ~ #check5_content,
#check6:checked ~ #check6_content,
#check7:checked ~ #check7_content
{display:block;}
.label:hover{color:red;}
.check:checked + .label{border-bottom: solid 5px red;}
.check:checked + .label:hover:after{color:red;}
.label{
font-size:36px;
padding:0 5px 0 5px;
border-right: solid 1px gray;
cursor:-moz-pointer;
cursor:-webkit-pointer;
cursor: pointer;
}
.content{
padding-top:10px;
}
.time{
width:80px;
font-size:24px;
text-align:right;
}
.subtime{
width:80px;
font-size:16px;
text-align:right;
}
.summary{
padding-left:10px;
font-size:16px;
}
-->
</style>
<form id="timetable">
<input id="check0" class="check" type="radio" name="contact" value="0">
<label for="check0" class="label"></label>
<input id="check1" class="check" type="radio" name="contact" value="1" checked="checked">
<label for="check1" class="label">月</label>
<input id="check2" class="check" type="radio" name="contact" value="2">
<label for="check2" class="label">火</label>
<input id="check3" class="check" type="radio" name="contact" value="3">
<label for="check3" class="label">水</label>
<input id="check4" class="check" type="radio" name="contact" value="4">
<label for="check4" class="label">木</label>
<input id="check5" class="check" type="radio" name="contact" value="5">
<label for="check5" class="label">金</label>
<input id="check6" class="check" type="radio" name="contact" value="6">
<label for="check6" class="label">土</label>
<input id="check7" class="check" type="radio" name="contact" value="7">
<label for="check7" class="label">日</label>
<hr>
<div class="content" id="check1_content">
<table><tbody>
<tr><td class="time">5:00</td><td class="summary">月曜日のミュージック</td></tr>
<tr><td class="subtime">5:10</td><td class="summary">クラシック</td></tr>
<tr><td class="subtime">5:30</td><td class="summary">ポップス</td></tr>
<tr><td class="time">12:00</td><td class="summary">ミュージック</td></tr>
<tr><td class="subtime">12:10</td><td class="summary">クラシック</td></tr>
<tr><td class="subtime">12:30</td><td class="summary">ポップス</td></tr>
</tbody></table>
</div>
<div class="content" id="check2_content">
<table><tbody>
<tr><td class="time">5:00</td><td class="summary">火曜日のミュージック</td></tr>
<tr><td class="time">12:00</td><td class="summary">ミュージック</td></tr>
</tbody></table>
</div>
<div class="content" id="check3_content">
<table><tbody>
<tr><td class="time">5:00</td><td class="summary">水曜日のミュージック</td></tr>
<tr><td class="time">12:00</td><td class="summary">ミュージック</td></tr>
</tbody></table>
</div>
<div class="content" id="check4_content">
<table><tbody>
<tr><td class="time">5:00</td><td class="summary">木曜日のミュージック</td></tr>
<tr><td class="time">12:00</td><td class="summary">ミュージック</td></tr>
</tbody></table>
</div>
<div class="content" id="check5_content">
<table><tbody>
<tr><td class="time">5:00</td><td class="summary">金曜日のミュージック</td></tr>
<tr><td class="time">12:00</td><td class="summary">ミュージック</td></tr>
</tbody></table>
</div>
<div class="content" id="check6_content">
<table><tbody>
<tr><td class="time">5:00</td><td class="summary">土曜日のミュージック</td></tr>
<tr><td class="time">12:00</td><td class="summary">ミュージック</td></tr>
</tbody></table>
</div>
<div class="content" id="check7_content">
<table><tbody>
<tr><td class="time">5:00</td><td class="summary">日曜日のミュージック</td></tr>
<tr><td class="time">12:00</td><td class="summary">ミュージック</td></tr>
</tbody></table>
</div>
<hr>
</form>
改良版
<style type="text/css">
<!--
#test20221011_timetable{}
.test20221011_content{display:none;}
.test20221011_check{display:none;}
#test20221011_check1:checked ~ #test20221011_check1_content,
#test20221011_check2:checked ~ #test20221011_check2_content,
#test20221011_check3:checked ~ #test20221011_check3_content,
#test20221011_check4:checked ~ #test20221011_check4_content,
#test20221011_check5:checked ~ #test20221011_check5_content,
#test20221011_check6:checked ~ #test20221011_check6_content,
#test20221011_check7:checked ~ #test20221011_check7_content
{display:block;}
.test20221011_label:hover{color:red;}
.test20221011_check:checked + .test20221011_label{border-bottom: solid 5px red;}
.test20221011_check:checked + .test20221011_label:hover:after{color:red;}
.test20221011_label{
font-size:200%;
padding:0 5px 0 5px;
border-right: solid 1px gray;
cursor:-moz-pointer;
cursor:-webkit-pointer;
cursor: pointer;
}
.test20221011_content{
padding-top:10px;
}
.test20221011_time{
width:80px;
font-size:150%;
text-align:right;
}
.test20221011_subtime{
width:80px;
text-align:right;
}
.test20221011_summary{
padding-left:10px;
}
-->
</style>
<form id="test20221011_timetable"><!--
--><input id="test20221011_check0" class="test20221011_check" type="radio" name="contact" value="0"><!--
--><label for="test20221011_check0" class="test20221011_label"></label><!--
--><input id="test20221011_check1" class="test20221011_check" type="radio" name="contact" value="1" checked="checked"><!--
--><label for="test20221011_check1" class="test20221011_label">月</label><!--
--><input id="test20221011_check2" class="test20221011_check" type="radio" name="contact" value="2"><!--
--><label for="test20221011_check2" class="test20221011_label">火</label><!--
--><input id="test20221011_check3" class="test20221011_check" type="radio" name="contact" value="3"><!--
--><label for="test20221011_check3" class="test20221011_label">水</label><!--
--><input id="test20221011_check4" class="test20221011_check" type="radio" name="contact" value="4"><!--
--><label for="test20221011_check4" class="test20221011_label">木</label><!--
--><input id="test20221011_check5" class="test20221011_check" type="radio" name="contact" value="5"><!--
--><label for="test20221011_check5" class="test20221011_label">金</label><!--
--><input id="test20221011_check6" class="test20221011_check" type="radio" name="contact" value="6"><!--
--><label for="test20221011_check6" class="test20221011_label">土</label><!--
--><input id="test20221011_check7" class="test20221011_check" type="radio" name="contact" value="7"><!--
--><label for="test20221011_check7" class="test20221011_label">日</label>
<hr>
<div class="test20221011_content" id="test20221011_check1_content">
<table><tbody>
<tr><td class="test20221011_time">5:00</td><td class="test20221011_summary">月曜日のミュージック</td></tr>
<tr><td class="test20221011_subtime">5:10</td><td class="test20221011_summary">クラシック</td></tr>
<tr><td class="test20221011_subtime">5:30</td><td class="test20221011_summary">ポップス</td></tr>
<tr><td class="test20221011_time">12:00</td><td class="test20221011_summary">ミュージック</td></tr>
<tr><td class="test20221011_subtime">12:10</td><td class="test20221011_summary">クラシック</td></tr>
<tr><td class="test20221011_subtime">12:30</td><td class="test20221011_summary">ポップス</td></tr>
</tbody></table>
</div>
<div class="test20221011_content" id="test20221011_check2_content">
<table><tbody>
<tr><td class="test20221011_time">5:00</td><td class="test20221011_summary">火曜日のミュージック</td></tr>
<tr><td class="test20221011_time">12:00</td><td class="test20221011_summary">ミュージック</td></tr>
</tbody></table>
</div>
<div class="test20221011_content" id="test20221011_check3_content">
<table><tbody>
<tr><td class="test20221011_time">5:00</td><td class="test20221011_summary">水曜日のミュージック</td></tr>
<tr><td class="test20221011_time">12:00</td><td class="test20221011_summary">ミュージック</td></tr>
</tbody></table>
</div>
<div class="test20221011_content" id="test20221011_check4_content">
<table><tbody>
<tr><td class="test20221011_time">5:00</td><td class="test20221011_summary">木曜日のミュージック</td></tr>
<tr><td class="test20221011_time">12:00</td><td class="test20221011_summary">ミュージック</td></tr>
</tbody></table>
</div>
<div class="test20221011_content" id="test20221011_check5_content">
<table><tbody>
<tr><td class="test20221011_time">5:00</td><td class="test20221011_summary">金曜日のミュージック</td></tr>
<tr><td class="test20221011_time">12:00</td><td class="test20221011_summary">ミュージック</td></tr>
</tbody></table>
</div>
<div class="test20221011_content" id="test20221011_check6_content">
<table><tbody>
<tr><td class="test20221011_time">5:00</td><td class="test20221011_summary">土曜日のミュージック</td></tr>
<tr><td class="test20221011_time">12:00</td><td class="test20221011_summary">ミュージック</td></tr>
</tbody></table>
</div>
<div class="test20221011_content" id="test20221011_check7_content">
<table><tbody>
<tr><td class="test20221011_time">5:00</td><td class="test20221011_summary">日曜日のミュージック</td></tr>
<tr><td class="test20221011_time">12:00</td><td class="test20221011_summary">ミュージック</td></tr>
</tbody></table>
</div>
<hr>
</form>