кодирование табличной формы в HTML - PullRequest
Новая
       0

кодирование табличной формы в HTML

2 голосов
/ 22 марта 2012

Я пытаюсь создать форму, которую клиенты будут заполнять через Интернет, поэтому до сих пор я прибегал к использованию различных таблиц, прислоненных друг к другу, чтобы получить представление, которое я ищу, одна из проблем заключается в том, чтокогда таблицы расположены рядом друг с другом, границы кажутся в два раза толще.

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

Моя форма выглядит примерно так (jsfiddle at http://jsfiddle.net/5AXKa/)

<html>
<head>
<style type="text/css">
    #form table
    { 

        width:100%;
    }

    td
    {
        border: 1px solid black;

    }

    table
    {
        border:1px solid black;
    }

    #form
    {
        width:1000px;
        /*border:1px solid black;*/
    }

    .field
    {
        border-right:none;
    }

    table, tr, td
    {
        border-collapse:collapse;
    }

    #Logo
    {
        width:30%;
    }

    #TestName
    {
        width:40%;
    }

    #TestNumber
    {
        width:30%;
    }

    #heading
    {
        height:70px;
    }

    .title
    {
        text-align:center;
    }

    .Data
    {
        border-left:none;
        border-right:none;
    }

</style>
</head>
<body>
    <div id="form">

        <table>
            <tr id="heading">
                <td id="Logo">LOGO GOES HERE</td>
                <td id="TestName">TEST NAME</td>
                <td id="TestNumber">TEST NUMBER</td>
            </tr>   
        </table>

        <table id="CommonData">
            <tr>
                <td class="field">CLIENT:-</td>
                <td class="data"></td>
                <td class="field">SITE:-</td>
                <td class="data"></td>
                <td class="field">Contract NO:-</td>
                <td class="data"></td>
            </tr>
            <tr>
                <td class="field">DUTY:-</td>
                <td class="data"></td>
                <td class="field">TAG No:-</td>
                <td class="data"></td>
                <td class="field">Loop No:-</td>
                <td class="data"></td>
            </tr>
            <tr>
                <td class="field">SYSTEM No:-</td>
                <td class="data"></td>
                <td class="field">SYSTEM REF:-</td>
                <td class="data"></td>
                <td class="field">DWG No:-</td>
                <td class="data"></td>
            </tr>
            <tr>
                <td class="field">CTP No:-</td>
                <td class="data"></td>
                <td colspan="4"></td>
            </tr>       
        </table>
        <table>
            <tr class="title">
                <td>INSTRUMENT / APPLIANCE</td>
            </tr>
        </table>
        <table style="float:left;width:50%">
            <tr>
                <td colspan="2">INSTRUMENT DETAILS:</td>
            </tr>
            <tr>
                <td>MANUFACTURER</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>SERIAL No:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>       
            <tr>
                <td>SIZE:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>SERVICE DATA SHEET REF:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>POWER SUPPLY:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>MODEL NO:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>IP RATING:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>RANGE/SPAN</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
        </table>
        <table style="float:right; width:50%">
            <tr>
                <td>INSTRUMENT TYPE</td>
                <td>TICK BOX</td>
            </tr>
            <tr>
                <td>PROXIMITY SWITCH</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>LIMIT SWITCH</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>FLOAT SWITCH</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>ULTRASONIC</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>THERMOCOUPLE</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>PRESSURE SWITCH</td>
                <td><input type="text" name="blah" style="width:100%"/></td>f
            </tr>
            <tr>
                <td>TEMPERATURE SWITCH</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>FLOW SWITCH</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>CONDUCITIVITY METER</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>TURBIDITY METER</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>CHEMICAL RESIDUAL ANALYSER</td>
                <td><input type="text" name="blah" style="width:100%"/></td>    
            </tr>
            <tr>
                <td>FLOW METER</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>PH METER</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>   
        </table>
        <table>
            <tr class="title">
                <td>MONITOR / CONVERTER</td>
            </tr>
        <table>
        <table>
            <tr>
                <td>PLANT UNIT:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
                <td>INSTRUMENT TYPE:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>SERIAL No:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
                <td>SPAN:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>POWER SUPPLY:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
                <td>OTHER:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
        <table> 
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 22 марта 2012

Это начало.

Используйте fieldset для каждого столбца. Положите каждые label и input в div.

CSS: 

fieldset {
    float: left;
}
label {
    clear: both; // Start the label at a new line
    display: block;
    float: left;
    width: 100px;
{
input {
    display: block;
    float: left;
}

HTML: 

<div><label for="field1">Field1</label><input type="text" name="field1" id="field1" /></div>
<div><label for="field1">Field2</label><input type="text" name="field2" id="field2" /></div>

и т.д ...

0 голосов
/ 22 марта 2012

Упростите структуру таблицы. Если возможно, используйте одну таблицу с одним элементом в одной строке - обычно нет необходимости имитировать печатные формы (когда вы пытаетесь поместить все на один лист бумаги) при разработке веб-формы. Не используйте все заглавные буквы и выделите элементы, подобные заголовкам, жирным шрифтом, чтобы прояснить структуру формы. Не устанавливайте ширину для ячеек - это часть основных преимуществ использования таблиц, которые вы можете оставить выделение ширины для браузеров.

Ваши проблемы с границами являются лишь одним из симптомов слишком сложной конструкции. При использовании одной таблицы соседние браузеры рушатся, когда вы просто устанавливаете cellspacing=0 в теге table или border-collapse: collapse в CSS.

0 голосов
/ 22 марта 2012

Вместо использования нескольких таблиц с одним div, вы можете использовать div и указать поле вокруг div.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...