Ниже предоставлены только занятые роли.

Код:
<!--HTML-->
<!--- ХТМЛ: кнопки вкладок, не забываем убирать звездочку --->
   <script type="text/javascript">
                                    $(document).ready(function(){

    $("#banner_1").click(function(){ 
    $("#vkladka1").slideToggle();
    $("#vkladka2").hide();
    $("#vkladka3").hide();
});

    $("#banner_2").click(function(){
    $("#vkladka1").hide();
    $("#vkladka2").slideToggle();
    $("#vkladka3").hide();
});
    
     $("#banner_3").click(function(){
     $("#vkladka1").hide();
     $("#vkladka2").hide();
     $("#vkladka3").slideToggle();
});

                                    });
        </script>


<div class="oformlenie_knopki" id="banner_1"><center>СЮЖЕТНЫЕ ПЕРСОНАЖИ</div>
<div class="oformlenie_knopki" id="banner_2">ПРОШЛОЕ</div>
<div class="oformlenie_knopki" id="banner_3">БУДУЩЕЕ</div>




<div id="vkladka1" style="display: block"><br><table style="width: 100%; border: none;" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td style="width: 25%;" align="center"><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>ДЕРЕВНЯ</b></span></td>
   <td style="width: 25%;" align="center"><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><b>ПЕРСОНАЖИ</b></span></td>
  </tr>
 </tbody>
  <tr>
   <td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>КОНОХА</b>
<p><img src=" "></span></td>
   <td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p>персонажи
</span></td>  </tr>
 <tr><td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>СУНА</b> 
<p><img src=" "></span></td>
   <td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"> 
<p>   
</span></td>
  </tr>
<tr><td style="width: 25%;" align="center" bgcolor= #f5f5dc><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>КИРИ</b>
<p><img src=" "></span></td>
   <td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>
  </tr>
<tr><td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>КУМО</b>
<p><img src=" "></span></td>
   <td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>
  </tr>
<tr><td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>ОТО</b> 
<p><img src=" "> </span></td>
   <td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
 
</span></td>
  </tr>
<tr><td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>ИВА</b>
<p><img src=" "></span></td>
   <td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>
  </tr>
<tr><td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>АКАЦУКИ</b> 
<p><img src=" "> </span></td>
   <td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;">
<p>персонажи
</span></td>
  </tr>
<tr><td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>ОСТАЛЬНЫЕ</b>
<p> </span></td>
   <td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>
  </tr>
</table></div>
<div id="vkladka2" style="display:none"><br><table style="width: 100%; border: none;" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td style="width: 25%;" align="center"><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>ДЕРЕВНЯ</b></span></td>
   <td style="width: 25%;" align="center"><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><b>ПЕРСОНАЖИ</b></span></td>
  </tr>
 </tbody>
  <tr>
   <td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>КОНОХА</b>
<p><img src=" "></span></td>
   <td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>  </tr>
 <tr><td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>СУНА</b> 
<p><img src=" "></span></td>
   <td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>
  </tr>
<tr><td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>КИРИ</b>
<p><img src=" "></span></td>
   <td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>
  </tr>
<tr><td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>КУМО</b>
<p><img src=" "></span></td>
   <td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>
  </tr>
<tr><td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>ОТО</b> 
<p><img src=" "> </span></td>
   <td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>
  </tr>
<tr><td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>ИВА</b>
<p><img src=" "></span></td>
   <td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>
  </tr>
<tr><td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>АКАЦУКИ</b> 
<p><img src=" "> </span></td>
   <td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>
  </tr>
<tr><td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>ОСТАЛЬНЫЕ</b>
<p> </span></td>
   <td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>
  </tr>
</table></div>
<div id="vkladka3" style="display:none"><br><table style="width: 100%; border: none;" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td style="width: 25%;" align="center"><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>ДЕРЕВНЯ</b></span></td>
   <td style="width: 25%;" align="center"><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><b>ПЕРСОНАЖИ</b></span></td>
  </tr>
 </tbody>
  <tr>
   <td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>КОНОХА</b>
<p><img src=" "></span></td>
   <td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p>Uchiha Sarada
</span></td>  </tr>
 <tr><td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>СУНА</b> 
<p><img src=" "></span></td>
   <td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>
  </tr>
<tr><td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>КИРИ</b>
<p><img src=" "></span></td>
   <td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>
  </tr>
<tr><td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>КУМО</b>
<p><img src=" "></span></td>
   <td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>
  </tr>
<tr><td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>ОТО</b> 
<p><img src=" "> </span></td>
   <td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>
  </tr>
<tr><td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>ИВА</b>
<p><img src=" "></span></td>
   <td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>
  </tr>
<tr><td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>АКАЦУКИ</b> 
<p><img src=" "> </span></td>
   <td style="width: 25%;" align="center" bgcolor=#f5f5dc><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>
  </tr>
<tr><td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm1" style="cursor: pointer; padding: 7px 0 11px 0;"><b>ОСТАЛЬНЫЕ</b>
<p> </span></td>
   <td style="width: 25%;" align="center" bgcolor=#fcfcee><span alt="#sm2" style="cursor: pointer; padding: 3px 0 15px 0; line-height: 0.95em;"><p> персонажи
</span></td>
  </tr>
</table></div>

        
        
      
<style type="text/css">
.oformlenie_knopki {
        display: inline-block;
        cursor: pointer;
        width: 190px; 
        padding: 6px; /* отступ текста от края */
        background-color: #4f4e4e; /* цвет фона */
        text-align: center; /* центровка текста */
        font-family: Georgia;  /* шрифт */
        font-size: 12px; /* размер текста*/
        color: #d5d5d5; /* цвет текста */
    }
  
    </style>
Код:
<p> Фамилия и Имя на английском.