Question

我想创建一个表，其中应包含两列，每列包含一个标题和一个文本框。

这是我需要的表格图片的链接..

我上面的表格Name是标题，My First and Last Name是文本框。接下来是他们的，一个标题和一个文本框。

这是我的html表：

<body>
<table>
<thead>
    <tr>
        <th> <font color="#008eff" size="4px"> 1. Location of your  Hotel/Resort/Property </font> </th>
        <th></th>
        <th></th>
        <th></th>

    </tr>
</thead>
<tbody>
    <tr><th>Name <td> <input type="text"></td><td>Designation</td><td><input type="text"></td></tr>
    <tr><th>Organization</th><td><input type="text"></td><td>  </td><td>  </td></tr>
    <tr><th>Email</th><td><input type="text"></td><td>  </td><td>  </td></tr>
    <tr><th>Hotel/Resort/Property Name</th><td><input type="text"></td><td>Website address</td><td><input type="text"></td></tr>
</tbody>
</table>

</body>

但是我无法像图片那样创建确切的表格。请帮帮我..

Answer 1

虽然与附加的图像略有不同，但我认为跨越4列更直观，

像这样

<thead>
<tr>
    <th colspan=4 align="left"> <font color="#008eff" size="4px" > 1. Location of your  Hotel/Resort/Property </font> </th>


</tr>

Answer 2

在您的第一个 colspan="2" 中使用 th tag 。

<tr>
    <th colspan="2"> <font color="#008eff" size="4px"> 1. Location of your  Hotel/Resort/Property </font> </th>
    <th></th>
    <th></th>
    <th></th>  
</tr>

检查 demo jsFiddle

要合并列时，请使用 colspan 。并使用 rowspan 进行合并行。阅读HTML table tag。

Answer 3

这样就可以了。使用Colspan合并列，不要在第二个

中再次使用标记

<body>
<table>
<thead>
    <tr>
        <th colspan="2"> <font color="#008eff" size="4px"> 1. Location of your  Hotel/Resort/Property </font> </th>

        <th  colspan="2"></th>


    </tr>
</thead>
<tbody>
    <tr><td> <b>Name</b><td> <input type="text"></td><td>Designation</td><td><input type="text"></td></tr>
    <tr><td><b>Organization</b></td><td><input type="text"></td><td>  </td><td>  </td></tr>
    <tr><td>Email</td><td><input type="text"></td><td>  </td><td>  </td></tr>
    <tr><td>Hotel/Resort/Property Name</td><td><input type="text"></td><td>Website address</td><td><input type="text"></td></tr>
</tbody>
</table>

</body>

Answer 4

HTML

<table>
<thead>
    <tr>
        <th> <font color="#008eff" size="4px"> 1. Location of your  Hotel/Resort/Property </font> </th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr><td>Name <input type="text"></td><td>Designation<input type="text"></td></tr>
        <tr><td>Organization <input type="text"></td><td></td></tr>
            <tr><td>Email <input type="text"></td><td></td></tr>
    <tr><td>Hotel/Resort/Property Name <input type="text"></td><td>Website address <input type="text"></td></tr>
</tbody>
</table>

CSS

table
{
border-collapse:collapse;
width:700px;
}
table, th, td
{
border: 3px solid white;
background-color: #F2F2F2;
color:black;
}
th{
text-align:left;
}
input{
    float:right;
}

DEMO

Answer 5

你可以使用它： Demo

<强> CSS

.header {
    color: #008eff;
    font-size: 13pt;
    font-weight: bold;
}

.bold {
    font-weight: bold;
}

input {
    border: 0px;
    background-color: #eee;
}

td {
    border: 1px solid #ddd;
    background-color: #eee;
    height: 20px;
}

<强> HTML

<table>
    <thead>
        <tr>
            <td colspan="4" class="header">1. Location of your Hotel/Resort/Property</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="bold">Name</td>
            <td><input type="text" /></td>
            <td class="bold">Designation</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td class="bold">Organization</td>
            <td><input type="text" /></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="bold">Email</td>
            <td><input type="text" /></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="bold">Hotel/Resort/Property Name</td>
            <td><input type="text" /></td>
            <td class="bold">Website address</td>
            <td><input type="text" /></td>
        </tr>
    </tbody>
</table>

Answer 6

<强>演示：

Live Demo

<强> HTML：

    <table>
    <thead>
        <tr>
            <th colspan="2" class="heading">  1. Location of your  Hotel/Resort/Property 
            </th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Name </th>
                <td>
                    <input type="text" placeholder="Myfirstname and lastname"/>
                </td>
                <th>Designation</th>
                <td>
                    <input type="text" placeholder="My Designation name"/>
                </td>
        </tr>
        <tr>
            <th>Organization</th>
            <td>
                <input type="text" placeholder="My Organization"/>
            </td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Email</th>
            <td>
                <input type="text" placeholder="My Email ID"/>
            </td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Hotel/Resort/Property Name</th>
            <td>
                <input type="text" placeholder="My Organization"/>
            </td>
            <th>Website address</th>
            <td>
                <input type="text" placeholder="My Website address"/>
            </td>
        </tr>
    </tbody>
</table>

<强> CSS

.heading
{
    color:#0083ff;
    font-size:12pt;
     background-color: #eee;
}
td,th
{

    text-align:left;
     background-color: #eee;
}

<强>输出：

enter image description here

P.S：

代码中的错误

请勿使用<font>标记，因为它已被弃用。的 To know more click here

练习使用样式表。

要使用样式表，您应该了解它们有两件事ID和Class

ID用于为特定元素赋予样式

而Class用于不同元素中相同样式的任何位置。

To know about Class & ID Click here..!!

<强> Advantages of Using CSS

如何在html表中添加两个包含一个标题和文本框的列

6 个答案: