0

私はhtmlが初めてで、テーブルを作成してスタイルを設定しようとしていますが、希望どおりにスタイル設定されていません: http://jsfiddle.net/DpLy5/ 

        <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Tabeller</title>
        <style>
            body{
                padding-top: 20px;
                padding-left: 20px;
            }
        </style>
    </head>
    <body>

        <table style="border: 1px solid black;">
            <tr>
                <td style="width: 700px; height:150px; border: 1px solid black;">
                    <img src="http://placehold.it/700x150">
                </td>
            </tr>
            <tr>
                <td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
                <td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
                <td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
            </tr>
            <tr>
                <td style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;"></td>
            </tr>
        </table>

    </body>
    </html>

中央の行の最初の列は 150px 幅にする必要がありますが、それよりも大きくなります。私はそれが何であるかわかりません。何か助けはありますか？ありがとうございました

4

4 に答える 4

2

1 行目と 3 行目の tr に colspan='3' を追加する必要があります。700px に設定しており、単一の列であるため、その上/下にあるものを同じにプッシュします。

http://jsfiddle.net/spacebean/DpLy5/1/

<table style="border: 1px solid black;">
    <tr>
        <td style="width: 700px; height:150px; border: 1px solid black;" colspan='3'>
            <img src="http://placehold.it/700x150">
        </td>
    </tr>
    <tr>
        <td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
        <td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
        <td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
    </tr>
    <tr>
        <td style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;" colspan='3'></td>
    </tr>
</table>

また、非インライン スタイルを使用することを強くお勧めします。これにより、何をしているかを簡単に確認でき、スタイルをコンテンツから切り離すことができるからです。

http://jsfiddle.net/spacebean/DpLy5/8/

<table class='myTable'>
    <thead>
        <tr>
            <th colspan='3'>
                <img src="http://placehold.it/700x150" />
            </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>adad</td>
            <td class='main'>adad</td>
            <td>adad</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan='3'></td>
        </tr>
    </tfoot>    
</table>

CSS:

.myTable {
    width: 700px; 
}

.myTable td, .myTable th {
  border: solid 1px black;
}

.myTable thead th {
    height:150px;  
}

.myTable tbody td {
    width: 150px; 
    height:700px; 
    background-color: #808080;
}    

.myTable tbody td.main {
    width: 400px;
    background-color: #fff;
}

.myTable tfoot td {
    height:75px;
    background-color: #808080;
}
于 2013-10-22T09:13:53.127 に答える
1

colspan="3"を最初の行と最後の行に追加する必要があります...それだけです。

http://jsfiddle.net/DpLy5/6/

<table style="border: 1px solid black;">
    <tr>
        <td colspan="3" style="width: 700px; height:150px; border: 1px solid black;">
            <img src="http://placehold.it/700x150">
        </td>
    </tr>
    <tr>
        <td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
        <td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
        <td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
    </tr>
    <tr>
        <td colspan="3" style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;"></td>
</table>
于 2013-10-22T09:24:11.010 に答える
1

最後のと同様にtd、最初trの を 3 つの列にまたがるようにします。colspan="3"tdtr

<td colspan="3" style="width: 700px; height:150px; border: 1px solid black;">
    <img src="http://placehold.it/700x150">
</td>

JS フィドル: http://jsfiddle.net/DpLy5/3/

于 2013-10-22T09:16:10.547 に答える
0

colspan属性が必要です。実際、colspan属性は「テーブル内のこの量の列にまたがらせてください」と言っています。

つまりcolspan="3、" は "表の 3 列にまたがらせてください" に翻訳されます。

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span

ただし、JSFiddle によると、レイアウトのラスターを作成しようとしています。を使用してこれを達成することは禁止されており、これtableは重大な悪い習慣です。

これは、テーブルはデータを入れる場所であり、レイアウト全体はデータではないためです。

セットアップとレイアウトを行う最良の方法は、Div を使用することです。http://www.w3schools.com/html/html_layout.asp

于 2013-10-22T09:46:03.460 に答える