文字列を線で囲みたい

html
1<link rel= "stylesheet" href ="mondai6.css">
2
3<table border = "1">
4   <tr>
5   <h1>動物一覧</h1>
6   </tr>
7 <ul>
8    <li>ぞう</li>
9    <li>キリン</li>
10    <li>カバ</li>
11    <li>サイ</li>
12 </ul>
13</table>
14

css
1<style>
2
3ul {
4  border-collapse: collapse;
5  list-style: circle;
6}
7
8h1 {
9  text-align: center;
10  font-size: 20px;
11}
12
13</style>

この文字列を線で囲んで、表のように表示させたいのですが、
方法が分かりません。
ご教授いただければと思います。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1<style>
2
3    table {
4        width: 320px;
5        margin: 0 auto;
6        border: 1px solid #000;
7        border-spacing: 0;
8    }
9
10    tbody,
11    thead,
12    th,
13    td {
14        border: none;
15    }
16
17    th {
18        border-bottom: 1px solid #000;
19    }
20
21    li {
22        display: list-item;
23        list-style: disc;
24    }
25
26</style>

HTML
1<table>
2    <thead>
3        <tr>
4            <th>動物一覧</th>
5        </tr>
6    </thead>
7    <tbody>
8        <tr>
9            <td>
10                <ul>
11                    <li>ゾウ</li>
12                    <li>キリン</li>
13                    <li>カバ</li>
14                    <li>サイ</li>
15                </ul>
16            </td>
17        </tr>
18    </tbody>
19</table>