테이블 구현이 잘 안되서 다시 한번 물어보겠습니다

[moonhwanii]

#5051

제가 구현하고자하는 테이블의 캡쳐화면을 첨부했습니다. (Final_Table.png 파일입니다)
위 테이블을 구현하기 위해 다음과 같이 작성했습니다.

외모 – Theme Optons – Custom CSS에 다음과 같이 입력했습니다.
table {
text-align: center; width: 100%;
border: 1px solid #000;
border-left: 0px;
border-right: 0px;
border-collapse: collapse;
}
th {
background-color: #cfc;
}
td {
border: 1px solid #999;
}

td.emphasis {
background-color: #ad8;
font-size: larger;
}

td.customheight {
height: 100px;
}

td.left {
text-align: left;
}

—————————————
그리고 새 페이지 추가해서
<table>
<tr>
<th>구분</th>
<th colspan=”2″>1~2일차</th>
<th>3일차</th>
<th>4일차</th>
</tr>
<tr>
<td>밥</td>
<td class=”left”><span>현미</span>밥</td>
<td class=”left”>백미밥</td>
<td class=”left”>보리밥</td>
<td class=”left”>찰밥</td>
</tr>
<tr>
<td>국</td>
<td>미역국</td>
<td>시금치국</td>
<td>무국</td>
<td>콩나물국</td>
</tr>
<tr>
<td class=”customHeight”>고기</td>
<td colspan=”2″>불고기</td>
<td>소고기</td>
<td>닭고기<br>생선</td>
</tr>
<tr>
<td>과일 1</td>
<td>사과</td>
<td>배</td>
<td class=”emphasis”>귤</td>
<td rowspan=”2″>딸기</td>
</tr>
<tr>
<td>과일 2</td>
<td>바나나</td>
<td>포도</td>
<td>복숭아</td>
</tr>
</table>
————————————
위와 같이 구현했는데 제대로 나오지 않습니다.
제목도 가운데 오지 않고, 귤 부분의 배경색도 변하지 않고, 테이블 셀의 상하도 좀더 크게 싶은데 커지지 않습니다.

브라우저로 보면 Current_table.png 파일처럼 보입니다.
Final_Table.png 파일처럼 테이블을 좀 세련되게 만들고 싶은데 잘 안되네요.
어디 부분을 수정해야 하는지 알려주시기 바랍니다.

Attachments:

You must be logged in to view attached files.

[글쓴이]

글