Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How do I increase the column width?

Posted on 2008-10-18
8
Medium Priority
?
179 Views
Last Modified: 2012-05-05
I would like to extend the width of the columns.  How do I do that?

newbieweb

<table>
<tr>
<td>Phone</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$29.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
<tr>
<td>Monthly Fee</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$35.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
</table>
0
Comment
Question by:newbieweb
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 

Author Comment

by:newbieweb
ID: 22750670
And how do I insert a blank line in the table?

<table>
<tr>
<td>Phone</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$29.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
// insert blank line here, betweenthe rows
<tr>
<td>Monthly Fee</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$35.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
</table>
0
 

Assisted Solution

by:samg3
samg3 earned 600 total points
ID: 22750723
Here is one way of adjusting the width and inserting a blank row. The parameters and code for the extra table row are in bold. Let me know if this helps you out.

<table width="300">
<tr>
<td width="100">Phone</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$29.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
<tr>
<td width="100">&nbsp;</td><td></td><td></td></tr>
<tr>
<td width="100">Monthly Fee</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$35.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
</table>
0
 

Author Comment

by:newbieweb
ID: 22750746
Cool!

How do I pad the whole thing with spaces on the left?  Or shift the whole table towards the center?

And how do I insert a blank line?

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 8

Expert Comment

by:fcardinaux
ID: 22750875
Here is how to center your table horizontally and insert a blank line
<table style="position: absolute; left: 50%; margin-left: -150px; width: 300px; text-align: left">
<tr>
<td width="100">Phone</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$29.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td><!-- This is the blank line, and 3 is the number of columns of your table -->
</tr>
<tr>
<td width="100">Monthly Fee</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$35.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
</table>

Open in new window

0
 
LVL 8

Expert Comment

by:fcardinaux
ID: 22750902
And this is the same table shifted 100px downwards.

Note also that I've replaced "position: absolute" by "position: relative". Depending on your situation, you should do the same (http://webdesign.about.com/od/advancedcss/a/aa061307.htm).
<table style="position: relative; left: 50%; top: 100px; margin-left: -150px; width: 300px; text-align: left">
<tr>
<td width="100">Phone</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$29.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td><!-- This is the blank line, and 3 is the number of columns of your table -->
</tr>
<tr>
<td width="100">Monthly Fee</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$35.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
</table>

Open in new window

0
 

Author Comment

by:newbieweb
ID: 22750956
I do not have your code working yet.  Here's the way it loked with this kind of definition:

<table width="600">


Then second picture uses this kind of definition:

<table style="position: relative; left: 50%; top: 100px; margin-left: -150px; width: 600px; text-align: left">

and looks like in the second picture:

Can you suggest what I am doing wrong?  I just want the table, which looks good, to shift the right a bit.

UnShiftedTable.JPG
ShiftedTable.JPG
0
 
LVL 8

Expert Comment

by:fcardinaux
ID: 22750974
This code should do what you want:

Note that in my previous code, the table is centered if the margin-left value is half the table width. So if you want a 600px wide table, you must change the margin-left value to 300px.
<table style="left: 100px; width: 600px; text-align: left">
<tr>
<td width="100">Phone</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$29.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td><!-- This is the blank line, and 3 is the number of columns of your table -->
</tr>
<tr>
<td width="100">Monthly Fee</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$35.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
</table>

Open in new window

0
 
LVL 8

Accepted Solution

by:
fcardinaux earned 1400 total points
ID: 22750981
Sorry, I forgot the "position: relative" style value
<table style="position: relative; left: 100px; width: 600px; text-align: left">
<tr>
<td width="100">Phone</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$29.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td><!-- This is the blank line, and 3 is the number of columns of your table -->
</tr>
<tr>
<td width="100">Monthly Fee</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$35.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
</table>

Open in new window

0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question