Блог

Главная - Вопросы по программированию - Как исправить форму таблицы?

Как исправить форму таблицы?

#html #css #forms #html-table

#HTML #css #формы #html-таблица

Вопрос:

что я должен воссоздать

что у меня есть

 @charset "UTF-8";
/* CSS Document */

body {
    max-width: 1200px;
    margin: auto;
    font-family: verdana, sans-serif;
    font-size: 10px;
}

h1 {
    text-align: center;
    font-size: 18px;
}

a {
    color: navy;
}

#topdot {
    vertical-align: top;
}

textarea {
    vertical-align: text-top;
    padding: 0 15px 0 0;
    overflow-y: scroll;
    resize: none;
    font-family: 'Lucida Console', monospace;
    font-size: 12px;
    color: gray;
}

form {
    autocomplete: on;
}

table {
    margin: auto;
    padding: 25px 0 20px;
    max-width: 500px;
    border-collapse: collapse;
}

tr {
    vertical-align: middle;
}

th {
    padding: 7px 0 0 0;
    text-align: right;
    vertical-align: top;
    font-weight: normal;
}

td {
    padding: 5px;
}

input {
    border: thin solid steelblue;
}

input:only-child {
    width: 52%;
}

input[name=number] {
    width: 13%;
}

input[name=fee] {
    width: 20%;
    background: lightgray;
    border: 2px inset;
    color: #c0bfb9;
    font-family: 'Lucida Console', monospace;
    text-shadow: 1px 1px 1px white;
}

select {
    color: blue;
}

.border1 {
    padding-top: 30px;
    border-top: thin solid lightgray;
}

.border2 {
    padding-top: 15px;
    border-bottom: thin solid lightgray;
}

#post {
    display: block;
    align-content: center;
    padding: 20px;
} 
 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tables and Forms: Part 2</title>


<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>

<body>
    
<h1>Registration/Order Form</h1>

<form method="post" action="#" name="registration_order_form">
    <table>
        <tr>
            <th>First Name</th>
            <td><img src="lighthouse_studio_registration_form_circle_red.gif" alt="red circle"></td>
            <td><input type="text" name="firstname"></td>
        </tr>
        <tr>
            <th>Last Name</th>
            <td><img src="lighthouse_studio_registration_form_circle_red.gif" alt="red circle"></td>
            <td><input type="text" name="lastname"></td>
        </tr>
        <tr>
            <th>Email</th>
            <td><img src="lighthouse_studio_registration_form_circle_red.gif" alt="red circle"></td>
            <td><input type="email" name="email1"></td>
        </tr>
        <tr>
            <th>Verify Email</th>
            <td><img src="lighthouse_studio_registration_form_circle_red.gif" alt="red circle"></td>
            <td><input type="email" name="email2"></td>
        </tr>
        <tr>
            <th>Address</th>
            <td><img src="lighthouse_studio_registration_form_circle_red.gif" alt="red circle"></td>
            <td><input type="text" name="address"></td>
        </tr>
        <tr>
            <th>City</th>
            <td><img src="lighthouse_studio_registration_form_circle_red.gif" alt="red circle"></td>
            <td><input type="text" name="city"></td>
        </tr>
        <tr>
            <th>State</th>
            <td><img src="lighthouse_studio_registration_form_circle_red.gif" alt="red circle"></td>
            <td>
                <select name="state">
                    <option value="select">Select</option>
                    <option value="al" name="state">AL</option>
                    <option value="ak" name="state">AK</option>
                    <option value="az" name="state">AZ</option>
                    <option value="ar" name="state">AR</option>
                    <option value="ca" name="state">CA</option>
                    <option value="co" name="state">CO</option>
                    <option value="ct" name="state">CT</option>
                    <option value="de" name="state">DE</option>
                    <option value="fl" name="state">FL</option>
                    <option value="ga" name="state">GA</option>
                    <option value="hi" name="state">HI</option>
                    <option value="id" name="state">ID</option>
                    <option value="il" name="state">IL</option>
                    <option value="in" name="state">IN</option>
                    <option value="ia" name="state">IA</option>
                    <option value="ks" name="state">KS</option>
                    <option value="ky" name="state">KY</option>
                    <option value="la" name="state">LA</option>
                    <option value="me" name="state">ME</option>
                    <option value="md" name="state">MD</option>
                    <option value="ma" name="state">MA</option>
                    <option value="mi" name="state">MI</option>
                    <option value="mn" name="state">MN</option>
                    <option value="ms" name="state">MS</option>
                    <option value="mo" name="state">MO</option>
                    <option value="mt" name="state">MT</option>
                    <option value="ne" name="state">NE</option>
                    <option value="nv" name="state">NV</option>
                    <option value="nh" name="state">NH</option>
                    <option value="nj" name="state">NJ</option>
                    <option value="nm" name="state">NM</option>
                    <option value="ny" name="state">NY</option>
                    <option value="nc" name="state">NC</option>
                    <option value="nd" name="state">ND</option>
                    <option value="oh" name="state">OH</option>
                    <option value="ok" name="state">OK</option>
                    <option value="or" name="state">OR</option>
                    <option value="pa" name="state">PA</option>
                    <option value="ri" name="state">RI</option>
                    <option value="sc" name="state">SC</option>
                    <option value="sd" name="state">SD</option>
                    <option value="tn" name="state">TN</option>
                    <option value="tx" name="state">TX</option>
                    <option value="ut" name="state">UT</option>
                    <option value="vt" name="state">VT</option>
                    <option value="va" name="state">VA</option>
                    <option value="wa" name="state">WA</option>
                    <option value="wv" name="state">WV</option>
                    <option value="wi" name="state">WI</option>
                    <option value="wy" name="state">WY</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>Zip Code</th>
            <td><img src="lighthouse_studio_registration_form_circle_red.gif" alt="red circle"></td>
            <td><input type="text" name="zip" maxlength="5"></td>
        </tr>
        <tr>
            <th>Phone</th>
            <td><img src="lighthouse_studio_registration_form_circle_red.gif" alt="red circle"></td>
            <td><input type="tel" name="number" maxlength="3">
                <input type="tel" name="number" maxlength="3">
                <input type="tel" name="number" maxlength="4">
            </td>
        </tr>
        <tr>
            <th>Perferred Contact</th>
            <td><img src="lighthouse_studio_registration_form_circle_red.gif" alt="red circle"></td>
            <td>
                <input type="radio" name="contact" value="email"> Email <input type="radio" name="contact" value="phone"> Phone</td>
        </tr>
        <tr>
            <th>How did you hear about us?</th>
            <td><img src="lighthouse_studio_registration_form_circle_red.gif" alt="red circle"></td>
            <td><select name="findout">
                    <option name="foundout" value="select">Select</option>
                    <option name="foundout" value="search">Search Engine</option>
                    <option name="foundout" value="social">Social Media</option>
                    <option name="foundout" value="ad">Advertisement</option>
                    <option name="foundout" value="commercial">TV Commerical</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>Select Preferred Colors</th>
            <td><img src="lighthouse_studio_registration_form_circle_red.gif" alt="red circle"></td>
            <td><input class="color" name="color" type="checkbox" checked>Light Blue
                <input class="color" name="color" type="checkbox">Purple
                <input class="color" name="color" type="checkbox">Fushia
                <input class="color" name="color" type="checkbox">None
            </td>
        </tr>
        <tr>
            <th>Comments</th>
            <td id="topdot"><img src="lighthouse_studio_registration_form_circle_red.gif" alt="red circle"></td>
            <td><textarea name="comments" rows="10" cols="45">Please tell us what you think about our website.  What do you want to add or remove?</textarea></td>
        </tr>
        <tr>
            <th>One-time Registration Fee</th>
            <td><img src="lighthouse_studio_registration_form_circle_red.gif" alt="red circle"></td>
            <td><input type="text" value="$9.99" name="fee" readonly>
                <input type="radio" name="signup" value="now" checked> Yes! Sign Me Up
                <input type="radio" name="signup" value="later"> Remind Me Later
            </td>
        </tr>
        <tr>
            <td><br></td>
        </tr>
        <tr>
            <th class="border1">Enter Login Username</th>
            <td class="border1"><img src="lighthouse_studio_registration_form_circle_red.gif" alt="red circle"></td>
            <td class="border1"><input type="text" name="user"></td>
        </tr>
        <tr>
            <th>Enter Login Password</th>
            <td><img src="lighthouse_studio_registration_form_circle_red.gif" alt="red circle"></td>
            <td><input type="password" name="pw1"></td>
        </tr>
        <tr>
            <th>Confirm Password</th>
            <td><img src="lighthouse_studio_registration_form_circle_red.gif" alt="red circle"></td>
            <td><input type="password" name="pw2"></td>
        </tr>
        <tr>
            <th>Terms amp; Conditions</th>
            <td><img src="lighthouse_studio_registration_form_circle_red.gif" alt="red circle"></td>
            <td><input type="checkbox" name="terms">I have read the <a href="#">Terms amp; Conditions</a> of use</td>
        </tr>
        <tr>
            <td class="border2"></td>
            <td class="border2"></td>
            <td class="border2"></td>
        </tr>
        <tr>
            <td id="post">
                <input type="submit" value="Submit" class="post"> <input type="reset" value="Reset" class="post">
            </td>
        </tr>
    </table>
</form>
    
</body>
</html>

Что я сделал не так? Что я хочу исправить:

  • выровняйте изображение красного круга по центру текста в первом столбце после «комментарии».
  • выровняйте по центру кнопки отправки и сброса. tr: последний дочерний элемент не работал
  • добавьте полосу прокрутки в текстовую область
  • добавить теги br или другой способ вставки строк? может быть, пограничная собственность? понял это

Комментарии:

1. Пожалуйста, я думаю, что вам лучше использовать кнопку начальной загрузки, таблицу, текстовый дизайн и так далее .. Вы можете сэкономить время и в то же время сделать вашу веб-страницу отзывчивой. Смотрите Учебное пособие по начальной загрузке

2.исходные материалы, которые я должен использовать для выполнения задания: youtu.be/4Us2q5eSWNc youtu.be/yD7FlO6QLmE youtube.com/watch?v=yD7FlO6QLmEamp;ab_channel=Treehhttps://…youtu.be/4l0GtnA8SCQ

3. это видео просто показывает типы входных данных HTML-формы.. но в вашем вопросе вы задаете вопрос о настройке и некоторых проблемах с выравниванием. Поэтому я предложил вам bootstrap, чтобы сэкономить ваше время.

4. спасибо, это просто дальше, чем мой класс. мне нужно работать с тем кодом, который у меня есть.

Ответ №1:

При работе с макетом на основе таблиц я считаю полезным просто добавить временную границу к таблице, чтобы лучше визуализировать макет. Это определенно поможет, если вы тоже только начинаете. Вы можете сделать это, просто добавив border=1 атрибут в таблицу. Вы можете удалить его, как только закончите.

В HTML <td> тег принимает вызов атрибута colspan . Этот атрибут позволит ячейке a расширяться до нескольких столбцов таблицы. Таким образом, ячейка таблицы с разметкой <td colspan=3></td> расширится до трех столбцов таблицы. Пример:

 <table border=1 width=100%>
  <tr>
    <td>Hello</td>
    <td>World</td>
    <td>!</td>
  </tr>
  <tr>
    <th colspan=3>
      <button>I am centered</button>
      amp;nbsp;
      <button>Me too</button>
    </th>
  </tr>
</table>

В приведенном выше примере я использовал <th> , что означает заголовок таблицы. Этот тег центрирует его содержимое по умолчанию. В вашем примере вы можете продолжать использовать <td> тег, но вам придется добавить правило css #post { text-align: center } .

Один совет о textarea : я не думаю, что инструкции должны быть в содержимом. placeholder Вместо этого используйте атрибут, чтобы вспомогательный текст был виден только тогда, когда текстовая область пуста. Пример:

 <textarea name="comments" rows="10" cols="45" placeholder="Please tell us what you think about our website.  What do you want to add or remove?"></textarea>

Я бы не стал беспокоиться о том, что полоса прокрутки не отображается. Полоса прокрутки появится автоматически, как только у вас будет достаточно содержимого. Вы можете попробовать поместить курсор в текстовое поле и нажать ENTERнесколько раз, чтобы увидеть всплывающее окно. Скриншот, на который вы ссылаетесь, вероятно, взят из действительно старого браузера.