table-layoutの色々なデザイン

スポンサーリンク
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>table-layout色々</title>
<style>
table { table-layout: fixed;margin: 0 auto; font-size:15px;font: "Comic Sans MS", cursive}
th,td { border: 2px solid #00F; }
.wd1 { width: 200px; }
div { text-align: center; }
caption { font: "Comic Sans MS", cursive; font-size:15px }
</style>
</head>
<body>
<table>
<tr><th>詩人の名前</th><th>詩人が書いた名言</th></tr>
<tr><td class="wd1">Oprah Winfrey</td><td>Failure is another stepping stone to greatness.</td></tr>
<tr><td class="wd1" >Antoine de Saint-Exupéry</td><td>A goal without a plan is just a wish.</td></tr>
<tr><td>Malcolm X</td><td>Truth is on the side of the oppressed.</td></tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>table-layout色々</title>
<style>
table { border-collapse: collapse; font:Verdana, Geneva, sans-serif; border-color: #C3F}
th,td { border: 1px solid orchid; }
div { text-align: center; }
table { margin: 0 auto; }
</style>
</head>
<body>
<table>
<tr><th>詩人の名前</th><th>詩人が書いた名言</th></tr>
<tr><td>Oprah Winfrey</td><td>Failure is another stepping stone to greatness.</td></tr>
<tr><td>Antoine de Saint-Exupéry</td><td>A goal without a plan is just a wish.</td></tr>
<tr><td>Malcolm X</td><td>Truth is on the side of the oppressed.</td></tr>
</table>
</body>
</html>