縦タブ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style type="text/css">
html {
}
body {
/*height:768px;
width:1024px;*/
background-color: #fff;
}
.contents {
height:100%;
border: solid 3px black;
}
.area4d {
width: 400px;
height:300px;
background-color: blue;
}
.zahyou {
width: 400px;
height:300px;
background-color:chartreuse;
}
.vtab__list {
margin: 0;
padding: 0;
list-style-type: none;
}
.vtab__item {
display: inline;
padding: 0;
margin: 0;
}
.vtab__itemlink{
display: block;
border-left: 8px solid #474655;
border-top: 1px solid #474655;
border-right: 1px solid #474655;
border-bottom: 1px solid #474655;
background-color: #fff;
padding: 3px 10px;
text-decoration: none;
color: #333;
width: 150px; /*@@*/
height: 80px; /*@@*/
text-align: left;
font-size: 14px;
}
.vtab__itemlink--current {
border-left: 8px solid #fff;
}
.vtab__item a:hover {
background-color: coral;
}
<style>
<title>ページのタイトル</title>
</head>
<body>
<div>
<table width="1024px">
<tr>
<td>
<div>
<p>4D</p>
</div>
</td>
<td>
<div>
<p>zahyou</p>
</div>
</td>
<td rowspan="2">
<div>
<ul>
<li><a class ="vtab__itemlink vtab__itemlink--current" href="#">TOP</a></li>
<li><a class ="vtab__itemlink" href="#">ABOUT</a></li>
<li><a class ="vtab__itemlink" href="#">DIARY</a></li>
<li><a class ="vtab__itemlink" href="#">BBS</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td colspan="2">
notify
</td>
</tr>
</table>
</div>
</body>
</html>