堆棧內存溢出
  簡體   English   中英

如何在HTML表格中的兩列中分別添加一個標題和文本框

[英]How to add two columns with one header and textbox in each in html table

 原文  2014-05-09 06:41:08  6   6    html/ html-table

問題描述

我想創建一個表，該表應包含兩列，每列一個標題和一個文本框。

這是我所需的表格圖像的鏈接。

樣品表圖片

我在上表.. 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>

但我無法創建圖片中的確切表格。 請幫我 ..

6 個解決方案

解決方案1
 2  2014-05-09 07:14:11

盡管與所附圖片略有不同，但我認為跨4列在視覺上更合適，

像這樣 

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


</tr>

解決方案2
 1  2014-05-09 06:50:25

在第一個th tag使用colspan="2" 。 

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

檢查這個演示jsFiddle

要合並列時，請使用colspan 。 和使用rowspan合並行。 讀取HTML表格標簽 。

解決方案3
 1  2014-05-09 06:51:21

這將達到目的。 使用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>

解決方案4
 1  2014-05-09 07:00:07

的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;
}

演示

解決方案5
 1 已采納  2014-05-09 07:00:45

您可以使用此： 演示

的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>

解決方案6
 1  2014-05-09 07:00:50

演示：

現場演示

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;
}

輸出：

在此處輸入圖片說明

PS：

您的代碼中的錯誤

要使用樣式表，您應該了解ID和Class兩個方面

ID用於為特定元素賦予樣式，

而Class用於需要在不同元素中使用相同樣式的地方。

要了解有關類和ID的信息，請單擊此處。

使用CSS的優點

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在html表的一列標題下包含兩列？ HTML表將標題添加到每一行 我可以將一個HTML表頭放在兩個表列上嗎？ 喜歡Excel中的合並和中心？ 如何在html表中打印具有“一對多”關系的兩個表的列？ 將表格添加到HTML中的文本框 將HTML表格單元格拆分為兩列，表格沒有標題 如何將兩個 sql 查詢添加到一個 html 表中 前兩列和 header 固定和 rest 在 HTML 表中可滾動 如何添加多個標題的HTML表？ 如何在具有4列的一個表中顯示數據。注意：使用了兩個xsl：for-each語句
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM