All geek questions in one place

Custom html alternative

Can someone show me some HTML layout without using tables?

______________________________________
|_______|_____________|               |
|_______|_____________|_______________|
|_______|_____________|               |
|_______|_____________|               |
|_______|_____________|_______________|

The third column should span the first two “rows” and then span the next three “rows”. The first “column” should be the same width

I ask about this because the argument “Tables are dead for layout”

UPDATE: markup content has checkboxes, text fields and text fields

CONCLUSION:

It was very instructive. I believe that I have been clarified by this philosophical question.

It seems to me that the general rule should be: Do not use tables for your entire site if there are sections similar to the table, and then use the table. The extremes “NEVER USE A TABLE” seem impractical and theoretical. Likewise, overuse of tables makes maintenance difficult, and working with 4-deep nested tables can be a real pain.

So, since the above layout looks like a table, I'm going to use a table. :)

+3
source share
9 answers

, , . ( , ? , ?) , , , CSS.

, .

, CSS. - .

+3

, . , .

+5

, , ... - , <div> s: http://jsfiddle.net/HEfTE/1/

, , , , . , .

, !

+4

, , ... .

, , . ( <div>)

--------------------------------
|                              |
|                              |
|------------------------------|
|         |                    |
|         |                    |
|         |                    |
|         |                    |
|         |                    |
|         |                    |
|         |                    |
|         |                    |
|         |                    |
--------------------------------

?

+2

. , ?

? , , .. , .

<style type="text/css">

div#formLeft {
    float: left;
}

textarea {
   display: block;
}

</style>

<div id="formLeft">
    <label>Form Field 1</label><input type="text" /><br />
    <label>Form Field 2</label><input type="text" /><br />
    <label>Form Field 3</label><input type="text" /><br />
    <label>Form Field 4</label><input type="text" /><br />
    <label>Form Field 5</label><input type="text" /><br />
</div>

<div id="formRight">
    <textarea></textarea>
    <textarea></textarea>
</div>

, , , .

? label , . , , . , , , .

, , . , , , , . formLeft !

alt text http://img94.imageshack.us/img94/5341/testbp.gif

: , shack. , .

!

+2

DIV float: right, float: left clear: both.

, , , , DIV , , , , , ( ).

, , DIV - , , , .., .

+1

( - ):

<html>
    <head>
        <style type="text/css">
            * { margin: 0; padding: 0; }
            #form {
                width: 400px;
                margin: 10px;
            }
            #textareas {
                width: 145px;
                float: right;
            }
            #textareas textarea {
                width: 145px;
                margin-bottom: 3px;
            }
            #textareas #textarea1 {
                height: 43px;
            }
            #textareas #textarea2 {
                height: 66px;
            }
            .forminput {
                height: 23px;
                width: 250px;
            }
            .forminput span {
                display: block;
                float: left;
                width: 75px;
            }
            .forminput input {
                width: 175px;
            }
        </style>
    </head>

    <body>
        <div id="form">
            <div id="textareas">
                <textarea id="textarea1"></textarea>
                <textarea id="textarea2"></textarea>
            </div>
            <div class="forminput">
                <span>Label 1</span>
                <input type="text" />
            </div>
            <div class="forminput">
                <span>Label 2</span>
                <input type="text" />
            </div>
            <div class="forminput">
                <span>Label 3</span>
                <input type="text" />
            </div>
            <div class="forminput">
                <span>Label 4</span>
                <input type="text" />
            </div>
            <div class="forminput">
                <span>Label 5</span>
                <input type="text" />
            </div>
        </div>
    </body>
</html>

.

+1

. , , 50/50. .

, , , . , , , .

/, , .

+1

? ? , .

0

Source: https://habr.com/ru/post/1756790/

More articles:


All Articles