0

I am trying to format a table to look like this...

Basically i want the "Dates" row to have two columns inside it (to and from) both of them 50% the width of dates...but however when i try to format it. "To" takes all of date and "From" takes all of Name. they arent locked under "Dates"

Any help will be appreciated...Thank youenter image description here

 <th width="100%">Dates</th><th>Name</th><th>Age</th> <tr> <tr> <td width="50%">To</td> <td width="50%">From</td> </tr> </tr>

Change

 <table border="1"> <tr class="heading"> <td colspan="6">Information</td> </tr > <th width ="15" colspan="2">Dates</th><th> Name</th><th>Age</th> <tr> <tr> <td width="2">From</td> <td width="2">To</td> <td></td> <td></td> </tr> <tr> <td width="5"> <input type="text" class="input" name="1fdate" /></td> <td width="2"> <input type="text" class="input" name="1fdate" /></td> </tr> </tr> </table>
Improve this question
1
  • Can you show more data? You may need to make to/from <th> too and use the headers attribute as well as what Back suggests so that the table is accessible. Commented Feb 10, 2013 at 4:11

3 Answers 3

Reset to default
1

I hope this is what you need. You use colspan and rowspan to merge the cells. When you set colspan to "2" in Date cell, it spans the row with two cells (or colums). And you set also rowspan of the cells next to Date to "2" so that they will span the rows taken by whole Date section.

<table width="600" border="0"> <tr> <th width="200" colspan="2" scope="col">Date</th> <th width="200" rowspan="2" scope="col">Name</th> <th width="200" rowspan="2" scope="col">Age</th> </tr> <tr> <th width="100">To</th> <th width="100">From</th> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

yes that is good...perfect even...but when i replace a &nbsp with <input type="text" class="input" name="1fdate" /> It stretches it...far wider than i want and setting the width <td width="5"> <input type="text" class="input" name="1fdate" /></td> doesnt fix it or make it smaller
@kemnet In the cell <td width="100"></td>, <input size="14" /> fits very well. Note that these numbers are not the same unit. So you might use CSS, which is better. So <td style="width:100px;"></td> and <input style="width:100px;" /> fit perfectly. No need to deal with width and size anymore! :)
1

Change

<th width="100%">Dates</th>

to have colspan value. Like

<th colspan="2">Dates</th>
Improve this answer

3 Comments

<th width="2">Dates</th><th>Name</th><th>Age</th> <tr> <tr> <td width="5%">To</td> <td width="5%">From</td> </tr> </tr>
This made it a little better...Thanks
I have a problem thou... i added this new inputs "refer to the orginal question" and the "too" and "from" column have gotten quite large...and is not responding to my width formatting to shorten them
0

Replace first line with below

 <th width="100%" colspan="2">Dates</th><th>Name</th><th>Age</th>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.