最近の更新

2012年9月3日月曜日

テーブルのセルの間隔を変更する方法(CSSのborder-spacing属性)

【目的】
JavaScriptで、HTMLのテーブルのセルの間隔をCSSのborder-spacing属性で変更します。



【手順】
1.「07-TableCellSpacingCssJS.html」というファイルを作成。
2.「07-TableCellSpacingCssJS.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <table id="table1" style="border-spacing:10px;">
        <tr>
            <td style="border:solid 1px black;">セル1-1</td>
            <td style="border:solid 1px black;">セル1-2</td>
        </tr>
        <tr>
            <td style="border:solid 1px black;">セル2-1</td>
            <td style="border:solid 1px black;">セル2-2</td>
        </tr>
    </table>
    <input type="button" value="50px" onclick="javascript:table1.style.borderSpacing='50px';">
    <input type="button" value="10px" onclick="javascript:table1.style.borderSpacing='10px';">
</body>
</html>

3.「07-TableCellSpacingCssJS.html」をブラウザで開きます。
4.以下の様に表示されれば成功です。








































以上です。

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。

関連記事