Question

I have a table with 8 <td>. All items are filled from a PHP array. An example row looks like this:

(row number) (Two Chinese characters) (1-5 characters) (input box 1) (1-5 characters) (input box 2) (1-5 characters) (submit button)

Currently all eight <td> align vertically but I would like to have td items 6(input box 2) and 7 (1-4 characters) to align next to input box 1 so there is no space in between

To make this more clear, consider how these two rows appear.

1.  喘氣  a ____ bc    ____ de  SUBMIT
2.  留學 ab ____ cdefa ____ gh  SUBMIT

Notice the big gap in between item 6 and the input box that follows?

I need mine to look something like this:

1.  喘氣  a ____ bc ____ de     SUBMIT
2.  留學 ab ____ cdefa ____ gh  SUBMIT

Any idea on how I can do this? I appreciate it.

Answer 1

Unless you start playing with some very complex colspan attributes, you’re not going to be able to do it with just <td> elements.

Instead, you will need to place all the items you want together into a single <td> element, leaving all others in their own <td> elements.

To use your example…

<tr>
  <td>(row number)</td>
  <td>(Two Chinese characters)</td>
  <td>(1-5 characters)</td>
  <td>(input box 1)</td>
  <td>(1-5 characters) (input box 2) (1-5 characters)</td>
  <td>(submit button)</td>
</tr>