liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0の各種修飾 - table関連

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> table関連 </title>
   <style type="text/css">
    table {
        width: 400px;
        border: 1px solid black;
        margin:20px;
    }
    td {
        background-color:#ccc;
        border: 1px solid black;
    }
    </style>
</head>
<body>
セルは連結、表タイトルは右<br>
border-collapse:collapse;caption-side:right;
<table style="border-collapse:collapse;caption-side:right;">
    <caption>表タイトル</caption>
    <tr>
        <td>セル1-1</td>
        <td>セル1-2</td>
    </tr>
    <tr>
        <td>セル2-1</td>
        <td>セル2-2</td>
    </tr>
</table>
セルは分割、空セルは非表示<br>
border-collapse:seperate;empty-cells:hide;
<table style="border-collapse:seperate;empty-cells:hide;">
    <tr>
        <td>セル1-1</td>
        <td>セル1-2</td>
    </tr>
    <tr>
        <td>セル2-1</td>
        <td></td>
    </tr>
</table>
セルは分割、セル間は20px<br>
border-collapse:seperate;border-spacing:20px;
<table style="border-collapse:seperate;border-spacing:20px">
    <tr>
        <td>セル1-1</td>
        <td>セル1-2</td>
    </tr>
    <tr>
        <td>セル2-1</td>
        <td>セル2-2</td>
    </tr>
</table>
</body>
</html>

f:id:liguofeng29:20160204233952p:plain

・レイアウトを制御する。

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> tableレイアウト</title>
   <style type="text/css">
    table {
        table-layout: fixed;
        border-collapse:collapse;
        border: 1px solid black;
        margin:10px;
    }
    td {
        background-color:#ccc;
        border: 1px solid black;
    }
    </style>
</head>
<body>
表幅はcol要素で計算される。
<table>
    <col style="width:240px"/>
    <col style="width:80px"/>
    <tr>
        <td>セル1-1</td>
        <td>セル1-2</td>
    </tr>
    <tr>
        <td>セル2-1</td>
        <td>セル2-2</td>
    </tr>
</table>
表幅は1行目のtd要素で計算される。
<table>
    <tr>
        <td style="width:80px">セル1-1</td>
        <td style="width:300px">セル1-2</td>
    </tr>
    <tr>
        <td>セル2-1セル2-1セル2-1セル2-1セル2-1</td>
        <td>セル2-2セル2-2セル2-2セル2-2セル2-2セル2-2セル2-2セル2-2</td>
    </tr>
</table>
均等な幅
<table style="width:300px">
    <tr>
        <td>セル1-1</td>
        <td>セル1-2</td>
    </tr>
    <tr>
        <td>セル2-1</td>
        <td>セル2-2</td>
    </tr>
</table>
</body>
</html>

f:id:liguofeng29:20160204235317p:plain