HTML - Table Content Alignment

Question

나는 웹 기반 게임을하고 있습니다. 내비게이션을 만들었지 만 텍스트가 올바르게 정렬되지 않았습니다.

HTML

<table width="123" height="253" border="0" align="right" cellpadding="0" cellspacing="2" class="table"> <tr> 
<td height="23" class="header">Main Game</td> </tr> <tr> 
<td height="65" valign="top" class="cell" align="center"> <a href="home.php">Homepage</a>  <a href="staff.php">Staff Page</a> 
</td> </tr> <tr> 
<td height="23" class="header">Social</td> </tr> <tr> 
<td height="65" valign="top" class="cell"><a href="forum.php">Discussions</a></td> </tr> <tr> 
<td height="23" class="header">LogOut</td> </tr> </table> 

CSS

.table { 
    border:#000000 1px solid; background-color:#363636; 
} 

.cell { 
    color:#FFFFFF; padding:3px; background-color:#1C1C1C; align:center; 
} 

.header { 
    padding:0px; padding-left:2px; color:#FFFFFF; 
    background:#3A0D07; font-family:verdana; font-size:10px; 
    line-height:18px; text-align:left; border-bottom:2px solid; 
    border-color:#000000; align:center; 
} 

출력

Answer 1

, 앵커 태그는 기본적으로 inline-block을 표시하는 코드에 대한 빠른 수정이를 변경하는 것입니다

a 태그를 표시하고 다음을 추가하십시오. rss :

.table .a{ 
    display:block; 
} 

Answer 2

테이블 대신 목록 항목을 사용해야 모든 브라우저에서 동일한 항목이 렌더링됩니다. 또한 당신은 더 잘 제어 할 수 있습니다.

HTML

<ul class="nav"> 
<li>Home</li> 
<li>Stuff</li> 
<li>About</li> 
</ul> 

CSS는 코드에 대한

ul { 
list-style-type: none; 
}