CODEWITHSUNDEEP
htmlcss
WelcomeTo
WelcomeTo

Reputation: 20591

Column width in HTML table

How I can cause the second <td> (which contain <input>) attribute to occupy 3/4 of the table width? 

 <table>
     <tr>
         <td>
             Name
         </td>
         <td>
            <input type="text"/>
         </td>                   
     </tr>
 </table>

I tried setting to td colspan=3, but it doesn't help me.

Upvotes: 0

Views: 194

Answers (3)

Jason Sperske
Jason Sperske

Reputation: 30446

The correct (assuming this was legitimately tabular data) way would be to add a <colgroup> as razhial has already suggested which might look like this (demo with some extra CSS to see how it's working):

<table>
  <colgroup>
    <col/>
    <col width='75%'/>
  </colgroup>
  <tbody>
    <td>Name</td>
    <td><input type="text"/></td>
  </tbody>
</table>

However from your example there appears to be a much cleaner approach that is the <label> element that works like this (demo):

<label for="Name">Name</label>
<input type="text" id="Name"/>

Upvotes: 1

mayabelle
mayabelle

Reputation: 10014

You can set the width:

<table>
     <tr>
         <td width="25%">
             Name
         </td>
         <td width="75%">
            <input type="text"/>
         </td>                   
     </tr>
 </table>

(or use css with those percentages instead, i.e. style="width: 25%" or class="yourCssClassThatHasTheWidthPercentageSetInIt")

Colspan is for when you want a cell to span multiple columns in other rows.

But is there any reason you are using tables instead of divs for layout?

Upvotes: 2

malifa
malifa

Reputation: 8165

<table>
 <tr>
     <td style="width: 25%">
         Name
     </td>
     <td style="width: 75%">
        <input type="text"/>
     </td>                   
 </tr>
</table>

Just a quick and dirty solution. Would be better to style these kinds of stuff in a seperate css file and use classes instead of inline css. A better way would be to use colgroups to style and describe the columns of the table. you can read about that here: http://www.w3schools.com/tags/tag_colgroup.asp

Upvotes: 2

Related Questions