为什么"colspan"在我的桌子上不起作用

Question

我在jsfiddle中创建了一个简单的表格.

我也把我的代码放在这里:

<table>
     <tr>
        <td class="field_label">name</td>
        <td>*</td>
        <td>
         <input type="text">
        </td>
        <td>
         <input type="text">
        </td>

      </tr>

      <tr>
        <td>email</td>
        <td>*</td>
        <td colspan="2">
           <input type="text"> 
        </td>
      </tr>
</table>

两个问题:

1.如您所见,我colspan="2"在email输入字段中使用<td>以使文本字段长度与name占据两列的字段相同,但它不起作用,为什么？

2.如何在输入字段中设置默认值并将默认值颜色设置为灰色？

Answer 1

关于问题1:保存第二个表行的输入的列将是2列长(如果您显示表列的边框,您可以看到); 但是,输入字段在每个浏览器中都有一个默认宽度 - 这意味着输入将显示与上面输入的宽度完全相同的宽度; 这就是你可能认为colspan不起作用的原因.

size向input标记或widthcss属性添加属性,例如:

<table>
 <tr>
    <td class="field_label">name</td>
    <td>*</td>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr><tr>
    <td>email</td>
    <td>*</td>
    <td colspan="2"><input type="text" style="width:99%;" ></td>
  </tr>
</table>

对于2.,可以使用以下value属性设置输入的默认值:

<input type="text" name="ID" value="101" />

如示例所示,您还应该至少使用该name属性(以便能够引用JavaScript或PHP的输入); 并使其html5有效,您应该关闭标记/>(因为您没有单独的结束</input>标记).

可以通过添加CSS样式来更改文本颜色; 无论是在输入本身,还是通过id或class属性; 以下将使输入中的文本颜色变为灰色:

<input type="text" style="color:#CCC;" >

一定要查看如何指定CSS样式(例如内联,或通过id或类),以及如何使用CSS指定颜色.