почему "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 или свойство width css, например, так:

<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 в целом (например, inline или идентификатор или класс ) и как указать цвета с помощью CSS .

Answer 2

Это это jsfiddle что вы хотите сделать?

• На самом деле, это сработало, но не отображалось, потому что ваша ширина не была 100%.
• Чтобы добавить текст по умолчанию во входное значение, вы можете использовать свойство value вашего ввода, например: <input type="text" value="Default text">
• Вы можете стилизовать поле ввода, как любой другой элемент, например:<input type="text" style="color: #FFFFFF; background-color: #C0C0C0;">

Answer 3

Установка style на display:block также приведет к уничтожению атрибута colspan.

Вместо style установите display:table-cell или не устанавливайте стиль display.

Answer 4

2. Как установить значение по умолчанию в поле ввода и установить цвет по умолчанию серым?

<input type="text" value=2> -- for setting default value
<TD bgcolor=##030303> --- For coloring