最近の更新

読込中...
ラベル HTML の投稿を表示しています。 すべての投稿を表示
ラベル HTML の投稿を表示しています。 すべての投稿を表示

2016年10月31日月曜日

テーブルを左右にぴったり並べる方法

【目的】
テーブルを左右に2つぴったり並べます。



【手順】
１．「index.html」というファイルを作成。
２．「index.html」を以下の様に入力。
<!doctype html>
<html>
    <head>
    </head>
    <body>
        <table style="border-collapse: collapse;">
            <tbody>
                <tr>
                    <td valign="top" style="padding: 0px;">
                        <table border="1">
                            <thead>
                                <tr>
                                    <th>番号</th>
                                    <th>名前</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>１</td>
                                    <td>あああああ</td>
                                </tr>
                                <tr>
                                    <td>２</td>
                                    <td>いいいいい</td>
                                </tr>
                                <tr>
                                    <td>３</td>
                                    <td>ううううう</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td valign="top" style="padding: 0px;">
                        <table border="1">
                            <thead>
                                <tr>
                                    <th>項目１</th>
                                    <th>項目２</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>項目１－１</td>
                                    <td>項目２－１</td>
                                </tr>
                                <tr>
                                    <td>項目１－２</td>
                                    <td>項目２－２</td>
                                </tr>
                                <tr>
                                    <td>項目１－３</td>
                                    <td>項目２－３</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

３．「index.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。














以上です。

投稿者 0 コメント
ラベル:

2016年9月16日金曜日

テーブルの列(セル)幅がブラウザで狭められない方法(まとめ)

【目的】
テーブルの列(セル)幅がブラウザで狭められないように試みたいと思います。



【試行１】
まずは、td・thの全ての列のwidth属性に値をセットしてみました。

結果は以下の通り、失敗でした。

『テーブルの列(セル)幅がブラウザで狭められない方法(td・thのwidth)』



【試行２】
次に、td・thの全ての列のstyleのwidth属性に値をセットしてみました。

こちらも、結果は以下の通り、失敗でした。

『テーブルの列(セル)幅がブラウザで狭められない方法(td・thのstyleのwidth)』



【試行３】
次に、td・thの全ての列のstyleのwidth属性に値をセットつつ、tableのstyleのtable-layoutにfixedをセットしてみました。

しかし、こちらも、結果は以下の通り、失敗でした・・・

『テーブルの列(セル)幅がブラウザで狭められない方法(tableのstyleのtable-layoutにfixed)』



【試行４】
最後に、td・thの中にdivを入れてそのstyleのwidth属性に値をセットしてみました。

結果は以下の通り、成功しました！

『テーブルの列(セル)幅がブラウザで狭められない方法(divのstyleのwidth)』



ブラウザにテーブルの列(セル)幅を狭められたくない場合は一度お試しください。




以上です。
投稿者 0 コメント
ラベル:

テーブルの列(セル)幅がブラウザで狭められない方法(divのstyleのwidth)

【目的】
テーブルの列(セル)幅がブラウザで狭められないようにdivを追加しstyleのwidthを指定してみます。
※この方法で成功しました。



【手順】
１．「index.html」というファイルを作成。
２．「index.html」を以下の様に入力。
<!doctype html>
<html>
    <head>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th><div style="width: 100px;">番号</div></th>
                    <th><div style="width: 100px;">名前</div></th>
                    <th><div style="width: 100px;">項目３</div></th>
                    <th><div style="width: 100px;">項目４</div></th>
                    <th><div style="width: 100px;">項目５</div></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>１</td>
                    <td>あいうえお</td>
                    <td>項目１－３</td>
                    <td>項目１－４</td>
                    <td>項目１－５</td>
                </tr>
                <tr>
                    <td>２</td>
                    <td>かきく<br />けこ</td>
                    <td>項目２－３</td>
                    <td>項目２－４</td>
                    <td>項目２－５</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

３．「index.html」をブラウザで開きます。
４．以下の様にテーブルの幅より、ブラウザの幅が大きい場合は列(セル)幅が狭められずに表示されます。




５．以下の様にブラウザの幅を狭めても、列(セル)幅が狭められずに表示されます。




以上です。

投稿者 0 コメント
ラベル:

テーブルの列(セル)幅がブラウザで狭められない方法(tableのstyleのtable-layoutにfixed)

【目的】
テーブルの列(セル)幅がブラウザで狭められないようにtableのstyleのtable-layoutにfixedを指定してみます。
※この方法は失敗です。⇒この件のまとめ・解決策。



【手順】
１．「index.html」というファイルを作成。
２．「index.html」を以下の様に入力。
<!doctype html>
<html>
    <head>
    </head>
    <body>
        <table border="1" style="table-layout: fixed;">
            <thead>
                <tr>
                    <th style="width: 100px;">番号</th>
                    <th style="width: 100px;">名前</th>
                    <th style="width: 100px;">項目３</th>
                    <th style="width: 100px;">項目４</th>
                    <th style="width: 100px;">項目５</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>１</td>
                    <td>あいうえお</td>
                    <td>項目１－３</td>
                    <td>項目１－４</td>
                    <td>項目１－５</td>
                </tr>
                <tr>
                    <td>２</td>
                    <td>かきく<br />けこ</td>
                    <td>項目２－３</td>
                    <td>項目２－４</td>
                    <td>項目２－５</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

３．「index.html」をブラウザで開きます。
４．以下の様にテーブルの幅より、ブラウザの幅が大きい場合は列(セル)幅が狭められずに表示されます。




５．以下の様にブラウザの幅を狭めると、列(セル)幅が狭めらてしました。
































以上です。

投稿者 0 コメント
ラベル:

テーブルの列(セル)幅がブラウザで狭められない方法(td・thのstyleのwidth)

【目的】
テーブルの列(セル)幅がブラウザで狭められないようにtd・thのstyleのwidthを指定してみます。
※この方法は失敗です。⇒この件のまとめ・解決策。



【手順】
１．「index.html」というファイルを作成。
２．「index.html」を以下の様に入力。
<!doctype html>
<html>
    <head>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th style="width: 100px;">番号</th>
                    <th style="width: 100px;">名前</th>
                    <th style="width: 100px;">項目３</th>
                    <th style="width: 100px;">項目４</th>
                    <th style="width: 100px;">項目５</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>１</td>
                    <td>あいうえお</td>
                    <td>項目１－３</td>
                    <td>項目１－４</td>
                    <td>項目１－５</td>
                </tr>
                <tr>
                    <td>２</td>
                    <td>かきく<br />けこ</td>
                    <td>項目２－３</td>
                    <td>項目２－４</td>
                    <td>項目２－５</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

３．「index.html」をブラウザで開きます。
４．以下の様にテーブルの幅より、ブラウザの幅が大きい場合は列(セル)幅が狭められずに表示されます。




５．以下の様にブラウザの幅を狭めると、列(セル)幅が狭めらてしました。




以上です。

投稿者 0 コメント
ラベル:

テーブルの列(セル)幅がブラウザで狭められない方法(td・thのwidth)

【目的】
テーブルの列(セル)幅がブラウザで狭められないようにtd・thのwidthを指定してみます。
※この方法は失敗です。⇒この件のまとめ・解決策。



【手順】
１．「index.html」というファイルを作成。
２．「index.html」を以下の様に入力。
<!doctype html>
<html>
    <head>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th width="100">番号</th>
                    <th width="100">名前</th>
                    <th width="100">項目３</th>
                    <th width="100">項目４</th>
                    <th width="100">項目５</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>１</td>
                    <td>あいうえお</td>
                    <td>項目１－３</td>
                    <td>項目１－４</td>
                    <td>項目１－５</td>
                </tr>
                <tr>
                    <td>２</td>
                    <td>かきく<br />けこ</td>
                    <td>項目２－３</td>
                    <td>項目２－４</td>
                    <td>項目２－５</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

３．「index.html」をブラウザで開きます。
４．以下の様にテーブルの幅より、ブラウザの幅が大きい場合は列(セル)幅が狭められずに表示されます。




５．以下の様にブラウザの幅を狭めると、列(セル)幅が狭めらてしました。
































以上です。

投稿者 0 コメント
ラベル:

2012年9月12日水曜日

テーブルの高さを設定する方法

【目的】
HTMLのテーブルの高さを設定します。



【手順】
１．「018-TableHeight.html」というファイルを作成。
２．「018-TableHeight.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <table border="1" height="500">
        <tr>
            <td>セル１－１</td>
            <td>セル１－２</td>
        </tr>
        <tr>
            <td>セル２－１</td>
            <td>セル２－２</td>
        </tr>
    </table>
</body>
</html>

３．「018-TableHeight.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。











































以上です。

投稿者 0 コメント
ラベル:

テーブルの横幅を設定する方法

【目的】
HTMLのテーブルの横幅を設定します。



【手順】
１．「017-TableWidth.html」というファイルを作成。
２．「017-TableWidth.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <table border="1" width="500">
        <tr>
            <td>セル１－１</td>
            <td>セル１－２</td>
        </tr>
        <tr>
            <td>セル２－１</td>
            <td>セル２－２</td>
        </tr>
    </table>
</body>
</html>

３．「017-TableWidth.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。











































以上です。

投稿者 0 コメント
ラベル:

2012年9月11日火曜日

DIV内の横位置を設定する方法

【目的】
HTMLのDIV内の横位置を設定します。



【手順】
１．「016-DivAlign.html」というファイルを作成。
２．「016-DivAlign.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <div align="center">
        DIVです。
    </div>
</body>
</html>

３．「016-DivAlign.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。












































以上です。

投稿者 0 コメント
ラベル:

2012年9月5日水曜日

テーブルのセル内の縦位置を行単位で設定する方法

【目的】
HTMLのテーブルのセル内の縦位置を行単位で設定します。



【手順】
１．「015-TableRowVAlign.html」というファイルを作成。
２．「015-TableRowVAlign.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <table border="1">
        <tr valign="top">
            <td height="200">セル１－１</td>
            <td height="200">セル１－２</td>
        </tr>
        <tr valign="center">
            <td height="200">セル２－１</td>
            <td height="200">セル２－２</td>
        </tr>
        <tr valign="bottom">
            <td height="200">セル３－１</td>
            <td height="200">セル３－２</td>
        </tr>
    </table>
</body>
</html>

３．「015-TableRowVAlign.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。










































以上です。

投稿者 0 コメント
ラベル:

テーブルのセル内の横位置を行単位で設定する方法

【目的】
HTMLのテーブルのセル内の横位置を行単位で設定します。



【手順】
１．「014-TableRowAlign.html」というファイルを作成。
２．「014-TableRowAlign.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <table border="1">
        <tr align="left">
            <td width="200">セル１－１</td>
            <td width="200">セル１－２</td>
        </tr>
        <tr align="center">
            <td width="200">セル２－１</td>
            <td width="200">セル２－２</td>
        </tr>
        <tr align="right">
            <td width="200">セル３－１</td>
            <td width="200">セル３－２</td>
        </tr>
    </table>
</body>
</html>

３．「014-TableRowAlign.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。










































以上です。

投稿者 0 コメント
ラベル:

テーブルの行の高さを設定する方法

【目的】
HTMLのテーブルの行の高さを設定します。



【手順】
１．「013-TableRowHeight.html」というファイルを作成。
２．「013-TableRowHeight.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <table border="1">
        <tr height="100">
            <td>セル１－１</td>
            <td>セル１－２</td>
        </tr>
        <tr height="200">
            <td>セル２－１</td>
            <td>セル２－２</td>
        </tr>
    </table>
</body>
</html>

３．「013-TableRowHeight.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。










































以上です。

投稿者 0 コメント
ラベル:

テーブルのセルのボーダー(枠線)の色を設定する方法

【目的】
HTMLのテーブルのセルのボーダー(枠線)の色を設定します。



【手順】
１．「012-TableCellBorderColor.html」というファイルを作成。
２．「012-TableCellBorderColor.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <table border="1">
        <tr>
            <td bordercolor="red">セル１－１</td>
            <td>セル１－２</td>
        </tr>
        <tr>
            <td>セル２－１</td>
            <td>セル２－２</td>
        </tr>
    </table>
</body>
</html>

３．「012-TableCellBorderColor.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。












































以上です。

投稿者 0 コメント
ラベル:

テーブルのセルの背景色を設定する方法

【目的】
HTMLのテーブルのセルの背景色を設定します。



【手順】
１．「011-TableCellBgcolor.html」というファイルを作成。
２．「011-TableCellBgcolor.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <table border="1">
        <tr>
            <td bgcolor="red">セル１－１</td>
            <td>セル１－２</td>
        </tr>
        <tr>
            <td>セル２－１</td>
            <td>セル２－２</td>
        </tr>
    </table>
</body>
</html>

３．「011-TableCellBgcolor.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。










































以上です。

投稿者 0 コメント
ラベル:

テーブルのカラムの属性をまとめて設定する方法(colgroupタグ)

【目的】
HTMLのテーブルのカラムの属性をcolgroupタグを使用てまとめて設定します。



【手順】
１．「010-TableColgroup.html」というファイルを作成。
２．「010-TableColgroup.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <table border="1">
        <colgroup span="2" width="200"/>
        <tr>
            <td>セル１－１</td>
            <td>セル１－２</td>
        </tr>
        <tr>
            <td>セル２－１</td>
            <td>セル２－２</td>
        </tr>
    </table>
</body>
</html>

３．「010-TableColgroup.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。









































以上です。

投稿者 0 コメント
ラベル:

テーブルのカラムの属性をまとめて設定する方法(colタグ)

【目的】
HTMLのテーブルのカラムの属性をcolタグを使用てまとめて設定します。



【手順】
１．「009-TableCol.html」というファイルを作成。
２．「009-TableCol.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <table border="1">
        <col width="200" align="center"/>
        <col width="200" align="right"/>
        <tr>
            <td>セル１－１</td>
            <td>セル１－２</td>
        </tr>
        <tr>
            <td>セル２－１</td>
            <td>セル２－２</td>
        </tr>
    </table>
</body>
</html>

３．「009-TableCol.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。







































以上です。

投稿者 0 コメント
ラベル:

2012年9月4日火曜日

テーブルのセル内の縦位置を設定する方法

【目的】
HTMLのテーブルのセル内の縦位置を設定します。



【手順】
１．「008-TableCellVAlign.html」というファイルを作成。
２．「008-TableCellVAlign.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <table border="1">
        <tr>
            <td height="200" valign="top">セル１－１</td>
            <td height="200" valign="bottom">セル１－２</td>
        </tr>
        <tr>
            <td height="200" valign="center">セル２－１</td>
            <td height="200">セル２－２</td>
        </tr>
    </table>
</body>
</html>

３．「008-TableCellVAlign.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。





































以上です。

投稿者 0 コメント
ラベル:

テーブルのセル内の横位置を設定する方法

【目的】
HTMLのテーブルのセル内の横位置を設定します。



【手順】
１．「007-TableCellAlign.html」というファイルを作成。
２．「007-TableCellAlign.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <table border="1">
        <tr>
            <td width="200" align="left">セル１－１</td>
            <td width="200" align="right">セル１－２</td>
        </tr>
        <tr>
            <td width="200" align="center">セル２－１</td>
            <td width="200">セル２－２</td>
        </tr>
    </table>
</body>
</html>

３．「007-TableCellAlign.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。





































以上です。

投稿者 0 コメント
ラベル:

テーブルのセルの高さを設定する方法

【目的】
HTMLのテーブルのセルの高さを設定します。



【手順】
１．「006-TableCellHeight.html」というファイルを作成。
２．「006-TableCellHeight.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <table border="1">
        <tr>
            <td height="100">セル１－１</td>
            <td height="100">セル１－２</td>
        </tr>
        <tr>
            <td height="200">セル２－１</td>
            <td height="200">セル２－２</td>
        </tr>
    </table>
</body>
</html>

３．「006-TableCellHeight.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。





































以上です。

投稿者 0 コメント
ラベル:

テーブルのセルの横幅を設定する方法

【目的】
HTMLのテーブルのセルの横幅を設定します。



【手順】
１．「005-TableCellWidth.html」というファイルを作成。
２．「005-TableCellWidth.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <table border="1">
        <tr>
            <td width="100">セル１－１</td>
            <td width="200">セル１－２</td>
        </tr>
        <tr>
            <td width="100">セル２－１</td>
            <td width="200">セル２－２</td>
        </tr>
    </table>
</body>
</html>

３．「005-TableCellWidth.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。





































以上です。

投稿者 0 コメント
ラベル:
登録: 投稿 (Atom)

関連記事

loading..