Leem.fin Leem.fin - 6 months ago 16
Javascript Question

why "colspan" does not work in my table

I have made a simple table form here in jsfiddle.

I also put my code here:

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


Two questions:

1. As you see, I use
colspan="2"
in
email
input field
<td>
to make the text field length the same as
name
fields which occupy two columns, but it does not work, why?

2. How can I set default value in the input field and set default value color to be gray ?

Answer

Regarding question 1.: The column holding the input for the second table row will be 2 columns long (as you could see if you were showing borders for the table columns); however, input fields have a default width in every browser - meaning that the input will show at exactly the same width as the one input above; that's why you probably think colspan isn't working.

Add a size attribute to the input tag, or a width css property, e.g. like this:

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

As for 2., the default value of an input can be set by using the value attribute:

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

As shown in the example, you should also use at least the name attribute (to be able to reference the input from JavaScript or PHP); and to make it html5 valid, you should close the tag with /> (since you don't have a separate closing </input> tag).

Changing the text color can be done by adding CSS styles; either in the input itself, or via the id or class attributes; the following would e.g. make the text color in the input light gray:

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

Be sure to check out how to specify CSS styles in general (e.g. inline, or by id or class), and how to specify colors with CSS.