Таблицы не оформлены должным образом

Question

Таблицы не оформлены должным образом

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>

Средний столбец первой строки должен быть 150 пикселей в ширину, но больше. Я не знаю, что это может быть. Любая помощь? спасибо

user1924247 22 окт. 2013, в 12:09

Источник

1

Ваш первый столбец во втором ряду имеет ширину 700 пикселей. Таким образом, первый столбец имеет ширину 700 пикселей
Sébastien 22 окт. 2013, в 09:14

Теги:

html

4 ответа

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>

Amol 22 окт. 2013, в 08:16

1

Сделайте td в первом tr span три столбца, используя colspan="3" аналогичный td в последнем tr.

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

JS Fiddle: http://jsfiddle.net/DpLy5/3/

Kevin Bowersox 22 окт. 2013, в 07:29

0

Вам нужен атрибут colspan. Атрибут colspan фактически говорит: "Позвольте мне охватить эту сумму столбца в таблице".

Это означает, что colspan="3 " переведено на "Позвольте мне охватить 3 столбца в таблице"

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

Однако, согласно вашему JSFiddle, вы пытаетесь сделать растровое изображение для своего макета. Достижение этого с использованием table - это не-go, это серьезная плохая практика.

Это связано с тем, что таблица - это то, где вы помещаете данные, а весь макет не является данными.

Лучший способ настройки и компоновки - использовать Div. http://www.w3schools.com/html/html_layout.asp

larssy1 22 окт. 2013, в 07:44

Ещё вопросы

Ваш первый столбец во втором ряду имеет ширину 700 пикселей. Таким образом, первый столбец имеет ширину 700 пикселей

spacebean · Accepted Answer · 2013-10-22T07-40-00.000Z

Вам нужно добавить colspan = '3' в свою первую и третью строку tr. Поскольку у вас он установлен на 700 пикселей, а в одном столбце он будет толкать один выше/ниже его к тому же:

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;
}