如何修复表格形式？答案

【问题标题】：How to fix table form?如何修复表格形式？
【发布时间】：2021-03-13 23:46:27
【问题描述】：

@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 & 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 & 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>

我做错了什么？我要解决的问题：

~~将红色圆圈图片与“cmets”后第一列文字的中心对齐~~
居中对齐提交和重置按钮。 tr:last-child 没有工作
向文本区域添加滚动条
~~添加 br 标记或插入行的不同方式？也许是边框属性？~~ 想通了

【问题讨论】：

拜托，我认为你最好使用引导按钮、表格、文本设计等等。你可以节省你的宝贵时间，同时可以让你的网页响应。 See Bootstrap Tutorial
我应该用于作业的源材料：youtu.be/4Us2q5eSWNc youtu.be/yD7FlO6QLmE youtube.com/watch?v=yD7FlO6QLmE&ab_channel=Treehhttps://…youtu.be/4l0GtnA8SCQ
该视频仅显示 html 表单输入的类型。但在您的问题中，您要求设计和一些对齐问题。所以我建议你引导以节省你的时间。
谢谢，它比我的班级更进一步。我需要使用我拥有的代码。

标签： html css forms html-table

【解决方案1】：

在使用基于表格的布局时，我发现只为表格添加边框以更好地可视化布局很有用。如果您也刚刚开始，它肯定会有所帮助。您可以通过简单地将border=1 属性添加到表中来做到这一点。完成后您可以将其删除。

<table border=1 width=100%>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

在 HTML 中，<td> 标记接受属性调用 colspan。此属性将允许一个单元格扩展到多个表格列。因此，带有标记<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>
      &nbsp;
      <button>Me too</button>
    </th>
  </tr>
</table>

在上面的示例中，我使用了代表表头的<th>。默认情况下，此标签将其内容居中。在您的示例中，您可以继续使用 <td> 标签，但必须添加 css 规则 #post { text-align: center }。

关于textarea 的一个提示：我不认为这些说明应该包含在内容中。请改用placeholder 属性，以便帮助文本仅在文本区域为空时可见。例如：

&lt;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?"&gt;&lt;/textarea&gt;

我不会担心滚动条不显示。一旦您有足够的内容，滚动条将自动出现。您可以尝试将光标放在文本框中并尝试按 ENTER 几次以查看它的弹出窗口。您引用的屏幕截图可能来自一个非常旧的浏览器。

【讨论】：