Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Centering of text depending on what table column the Text is in

Posted on 2012-09-17
3
Medium Priority
?
222 Views
Last Modified: 2012-09-18
Hello

I have a table with columns defined as follows:

	<colgroup>
		<col class="col1" />
		<col class="col2" />
		<col class="col3" />
		<col class="col4" />
		<col class="col5" />
		<col class="col6" />
		<col class="col7" />
	</colgroup>

Open in new window


Any text that is in a cell within col2 or in col3 I want to be centered.  Any text that is in other columns should be unaffected.  

What's the best way to do that?  

Some of the text is H3 and some is H4.  But if they are in a table cell which is col2 and in col3 I want the text align centering to take control.

I've tried this, and it doesn't work:
#daytonaMastertable .col2 {
    text-align: center;
}

Open in new window


I also tried this and it didn't work:

col.col2 td h2 h3 h4 h5 {
      text-align: center;
}
Here's an HTML snippet:

<tr>
			<td>
				<h4>
					Over Provisioning</h4>
			</td>
			<td>
				<h4>Yes</h4></td>
			<td>
				<h4>&nbsp;</h4></td>
			<td>
				<h4>Enterprise Class</h4></td>
			<td>&nbsp;
		  </td>
			<td>&nbsp;
		  </td>
		</tr>

Open in new window


BTW I already have this defined in the external style sheet:

#daytonaMastertable .col1 { width: 436px; }      
#daytonaMastertable .col2 { width: 110px; }
#daytonaMastertable .col3 { width: 110px; }
#daytonaMastertable .col4 { width: 130px; }
#daytonaMastertable .col5 { width: 150px; }
#daytonaMastertable .col6 { width: 0px; }            
#daytonaMastertable .col7 { width: 0px;
}

Thanks

Rowby
0
Comment
Question by:Rowby Goren
3 Comments
 
LVL 11

Expert Comment

by:Amar Bardoliwala
ID: 38408282
Hello  rowby,

you can use <td align='center'> for column 2 and 3 in this way you will be able to center all texts in those columns.

Also please look at following link.

http://stackoverflow.com/questions/1238115/using-text-align-center-in-colgroup

Hope this will help you.

Thank you.

Amar Bardoliwala
0
 
LVL 61

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 38408474
align has been deprecated - you should rather use CSS
The best of doing this is

td:nth-child(3), td:nth-child(4) {
      text-align: center;
}

BUT ... IE does not support this (surprise, surprise) - so if you are intent on supporting IE (personally I don't) then you can try this
td.cent {
	text-align: center;
}

Open in new window

And give your rows the class 'cent' (or whatever)
...
	<tr>
		<td>One</td>
		<td>Two</td>
		<td class="cent">Three</td>
		<td class="cent">Four yyy</td>
		<td>Five</td>
		<td>Six</td>
		<td>Seven</td>
	</tr>
...

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 38411994
Hi Julian.

What I did was go right to the html and did the old fashioned text align -- not in css but in the html.  It will serve as a temporary solution until I switch the table to pure divs.

So thanks for helping me troubleshoot this.

I just posted a related question on EE, regarding this same page,  that you might want to participate in.

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27869773.html#a38411988

Rowby
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month13 days, 21 hours left to enroll

580 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