Table Cell Alignment

Is it possible to establish default alignments for different cells in a table? I have a table with 13 columns. I would like to be able to set the default alignment to "center" in all columns but two. I wish the second column to have a default alignment of "right" and the third column to have a default alignment of "left". Then when I copy data from an excel spreadsheet into the table, I would like these alignments to be maintained.
Thanks in advance for any help you can provide!
Greg

Gregory Kush wrote:
Is it possible to establish default alignments for different cells in a table? I have a table with 13 columns. I would like to be able to set the default alignment to "center" in all columns but two. I wish the second column to have a default alignment of "right" and the third column to have a default alignment of "left". Then when I copy data from an excel spreadsheet into the table, I would like these alignments to be maintained.
Thanks in advance for any help you can provide!
Greg
Can you do what you are asking easily, sure with CSS it's a fairly easy task. Copying and pasting from Excel, this gets discussed very often and it's not a pretty process. First because Excel does not Export HTML well at all, and XML exporting in Excel is not an easy task to set up, but once it's setup it can be a viable workflow.
CSS Tutorial - http://www.w3schools.com/CSS/
Basically you define a class or ID to your table and another class to text align left. So you do something like this:
CSS
.center-text { text-align: center; }
.left-text { text-align: left; }
.right-text { text-align: right; }
<table class="center-text"><tr><td> // that will center everything in the table.
Then for the right align and left align just apply the respective class to the cell (this can also be done through properties window by using the drop-down menu to select the class). If you are using XML or populating this information from a database can just run a loop to populate the data, and you can also use that same query to populate Excel for reporting if you wish to go that route.

Similar Messages

Table cell align problem

I am using checkbox in my table using tablecellrenderer.i am able to align the checkbox to left.but it's showing center position when u click & hold.how to do that?
thanka in advance

You would have to provide your own cell editor that is left-aligned, as well as the renderer.

Can table cell vertical alignment be defined via CSS?

In a table cell (ie, "td") is there a way to define "valign" via CSS, instead of the table cell proper?
In other words, instead of...
<table>
<tr>
<td valign="top">
...is it possible to do :
<table>
<tr>
<td class="top">
...and somehow let the stylesheet define the vertical alignment?
I'm asking because none of the attribute presets in Dreamweaver CS4 seem to provide for vertical alignment. Everything else on God's green earth seems to be there, but table cell vertical alignment seems to be the ONLY thing CSS forgot about.

How about giving the class "top": text-align:center. Or even the tag "td" in your stylesheet. Does that help?
John

J Table - Single Cell Alignment

Hello everyone,
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Component;
import java.util.Random;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTable;
import javax.swing.table.DefaultTableModel;
import javax.swing.table.TableCellRenderer;
import javax.swing.table.TableColumnModel;
public class RowColorTest
    private JTable table;
    public static void main(String[] args)
        new RowColorTest();
    public RowColorTest()
        javax.swing.SwingUtilities.invokeLater(new Runnable()
            public void run()
                createGUI();
    public void createGUI()
        JFrame frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
        String[] columnNames = new String[4];
        columnNames[0] = "Name";
        columnNames[1] = "Age";
        columnNames[2] = "Value";
        columnNames[3] = "Extra";
        Object[][] data = new Object[20][4];
        Random r = new Random();
        for(int a=0; a < 4; a++)
            for(int i=0; i < 20; i++)
                if(i == 0 || i == 5 || i == 10 || i == 15)
                    data[i][a] = 23;
                else
                    data[i][a] = r.nextInt(50);
        DefaultTableModel model = new DefaultTableModel(data, columnNames);
        table = new JTable(model)
            public boolean isCellEditable(int rowIndex, int vColIndex)
                return false;
            public Class getColumnClass(int column)
                return getValueAt(0, column).getClass();
            public Component prepareRenderer(TableCellRenderer renderer, int row, int column)
                Component c = super.prepareRenderer(renderer, row, column);
                TableColumnModel tcm = table.getColumnModel();
                Object result = getValueAt(row, tcm.getColumnIndex("Value"));
                if(result instanceof Integer)
                    if(((Integer) result) == 23)
                        c.setBackground(new Color(0, 255, 153));
                        c.setForeground(Color.BLACK);
                        if(column == 0)
                                // I would like to do a CELL ALIGNMENT for this particular condition.
                                // setHorizontalAlignment() does not exist for the object c (Component).
                    else
                        c.setBackground(Color.WHITE);
                        c.setForeground(Color.BLACK);
                        if(column == 0)
                                // I would like to do a CELL ALIGNMENT for this particular condition.
                                // setHorizontalAlignment() does not exist for the object c (Component).
                if(table.isRowSelected(row))
                    c.setBackground(Color.BLUE);
                    c.setForeground(Color.WHITE);
                return c;
        JPanel panel = new JPanel();
        JScrollPane sp = new JScrollPane(table);
        panel.add(sp, BorderLayout.CENTER);
        frame.setContentPane(panel);
        frame.pack();
        frame.setVisible(true);
}Sorry for bringing this up again, but I am having a hard time trying to "align" a single "cell". In the code that I have provided, I tried to find a method from the Component object for setHorizontalAlignment() hoping to make this call:
c.setHorizontalAlignment(SwingConstants.RIGHT);
However, it does not exist. How would I go about setting the alignment for an individual cell? I've searched the forum for "cell alignment" and found some information about using a DefaultTableCellRenderer, but I'm not sure how to merge that with the existing code that I currently have.
In this thread: http://forums.sun.com/thread.jspa?forumID=57&threadID=659910 , camickr pointed out that I can use the row and column variables to find which cell to align, however once I've found the particular cell that I'd like to align, what do I do next? The component c does not have a method to set alignment in this scenario.
Thanks again,
Brianiak

You - the programmer - know that the component in question will be a label of some kind. The compiler, however, does not. As far as javac is concerned, the component could be, say, a 3D animation, in which case setHorizontalAlignement would be illegal.
In order to share our runtime knowledge with the compiler, we have to use some explicit casting:
(JLabel)c.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);Note that this will lead to runtime errors if our component is not an instance of JLabel, so it's a good idea to surround the code with:
if (c instanceof JLabel){
}

Vertical alignment in table cells not working in generated output

Using RH9 WebHelp. I have created a simple table style. Because I could not find out how to make cell vertical alignment (top, center, bottom) part of the style definition, I have been applying it manually to individual whole tables using the cell alignment properties.
This worked fine for a while, but at some point I noticed that even though the tables look right in Design view, with top-aligned cells contents, it gets hosed in generating output and all tables now come with vertically centred cell contents even through the in-line formatting for top alignment is still there in the code.
Any ideas?

Hi Mike,
I'm confused to where you applied the vertical alignment. Normally, I would set this for the table cells and not the table.
CSS has indeed an order in rendering: There is a point system for determining the CSS to apply. See http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css-specific ity/ for a short introduction.
And as an extra to the point system, the place where the styling is present, also determines the styling. Browsers use the following hierarchy (in descending order)
User style sheet defined in the browser.
Inline styling.
Style block in page.
External style sheet
You can overwrite styling from a lower order using the !important declaration. You can use this to make sure that inline styling will not be able to overwrite styles from your style sheet. (Unless the inline styles use !important themselves.) Example:
table.mytable td {
vertical-align: middle !important;
This will make all the content of table cells in the table with the class mytable to be vertically centered.
Greet,
Willam

Control horizontal alignment of table cell?

Is it possible to control the horizontal alignment of text within a table cell using some form of xsl:attribute code? I wasn't able to find any alignment attributes supported in the user guide and was hoping there was a way to manage it- the problem is that I don't know ahead of time which cells need to be left justified and which ones need to be centered.
Thanks,
Kevin

I've tried the following in the
advanced properties but with no success.
<?if:number(EMPID)>6?>
<xsl:attribute
xdofo:ctx="block" name="text-align">center
</xsl:attribute>
<?end if?>
Change the attribute to the following and the formatting works.
<?if:number(EMPID)>6?>
<xsl:attribute
xdofo:ctx="block" name="background-color">red
</xsl:attribute>
<?end if?>
I'm previewing in PDF.
If anyone has any ideas they would be greatly appreciated.
Thankyou
John.

Custom Table Cell Renderer Unable To Set Horizontal Alignment

Hello,
I have a problem that I'm at my wit's end with, and I was hoping for some help.
I need to render the cells in my table differently (alignment, colors, etc) depending on the row AND the column, not just the column. I've got this working just fine, except for changing the cell's horizontal alignment won't work.
I have a CustomCellRenderer that extends DefaultTableCellRenderer and overrides the getTableCellRendererComponent() method, setting the foreground/background colors and horizontal alignment of the cell based on the cell's value.
I have a CustomTable that extends JTable and overrides the getCellRenderer(int row, int column) method to return a private instance of this CustomCellRenderer.
This works fine for foreground/background colors, but my calls to setHorizontalAlignment() in the getTableCellRendererComponent() seem to have no effect, every cell is always displayed LEFT aligned! It's almost like the cell's alignment is determined by something else than the table.getCellRenderer(row,column).getTableCellRendererComponent() method.
I've also tried setting the renderer for every existing TableColumn in the TableModel to this custom renderer, as well as overriding the table's getDefaultColumn() method to return this custom renderer as well for any Class parameter, with no success.
No matter what I've tried, I can customize the cell however I want, EXCEPT for the horizontal alignment!!!
Any ideas???
Here's the core custom classes that I'm using:
class CustomTable extends JTable {
private CustomRenderer customRenderer = new CustomRenderer();
public CustomTable() {
super();
public TableCellRenderer getCellRenderer(int row, int column) {
return customRenderer;
} // end class CustomTable
class CustomRenderer extends DefaultTableCellRenderer {
public CustomRenderer() {
super();
public Component getTableCellRendererComponent(JTable table, Object value, boolean isSelected, boolean hasFocus, int row, int column) {
super.getTableCellRendererComponent(table, value, isSelected, hasFocus, row, column);
if (row % 2 == 0) {
setForeground(Color.red);
setHorizontalAlignment(RIGHT);
} else {
setForeground(Color.blue);
setHorizontalAlignment(LEFT);
return this;
} // end class CustomRenderer
Even worse, I've gotten this to work fine in a trivial example I made to try and re-create the problem. But for some reason, this same thing is just not working for horizontal alignment in my actual project?!?
Anyone have any ideas how the cell's horizontal alignment set in the getTableCellRendererComponent() method is being ignored or overwritten before the cell is being displayed???
Thanks, any help is appreciated,
-Alex Blume

Ok, so I've looked into their source and I think I know where and what the trouble is. The JTable.java has a method called:
3658> public TableCellRenderer getCellRenderer(int row, int column) {
3659> TableColumn tableColumn = getColumnModel().getColumn(column);
3660> TableCellRenderer renderer = tableColumn.getCellRenderer();
3661> if (renderer == null) {
3662> renderer = getDefaultRenderer(getColumnClass(column));
3663> }
3664> return renderer;
3665> }
starting at line 3658 of their source code. It retrieves the TableCellRenderer on line 3660 by calling the tableColumn's getCellRenderer method. This is found in the TableColumn.java class:
421> public TableCellRenderer getCellRenderer() {
422> return cellRenderer;
423> }
See the problem? Only ONE cell Renderer. It's referring to a variable found at line 140 which is of type TableCellRenderer ... well actually it's created as a DefaultTableCellRenderer at some point since TableCellRenderer is an interface.
Basically the fix is this:
In the TableColumn.java file, a collection (Vector, LinkedList, whatever) needs to keep track of each cell's renderer. This will solve the solution. Of course this will be something that you or I can make.
What's funny is the contradiction in documentation between JTable's and TableColumn's getCellRenderer() method. First, if we look at TableColumn's documentation it states:
"Returns the TableCellRenderer used by the JTable to draw values for this column."
Based on that first statement, the getCellRenderer() method in TableColumn is doing its job exactly. No lies, no contradictions in what it does.
However, that method is called up inside of the JTable's getCellRenderer() method which says a completely different thing which is:
"Returns an appropriate renderer for the cell specified by this row and column."
Now we have a problem. For the cell specified. It appears that the rush to push this out blinded some developer who either:
1) mis-interpreted what the JTable getCellRenderer() method was supposed to do and inadvertently added a feature or;
2) was in a 2 a.m. blitz, wired on Pepsi and adrenalin and wrote the bug in.
Either way, I'm really hoping that they'll fix this because it will take care of at least 2 bugs. Btw, anyone interested in posting a subclass to solve this problem (subclass of TableColumn) is more than welcome. I've spent much too much time on this and my project is already behind so I can't really afford any more time on this.
later,
a.

Horizontal align center in table-cell

Hello,
I'm having a problem getting to horizontally align a div (schilderij) in another div (schilderijholder).
This schilderij div has a height and width of 480px and has display: table-cell. The content of this div is an image, with different sizes on every page (there are multiple pages, it is some sort of photogallery). The images are nicely centered, horizontally and vertically, inside this div.
The containing div (schilderijholder), has a width of 100% of it's containing block, which has a variable size
The problem is, I cant get the schilderij div horizontally centered in the schilderijholder div.
Here's the simplified code. If you need the whole code, I can post that too.
    <div class="leftWrapper" style="clear: none; float: left; width: 68%; height: 100%;">
    <div class="content" style="margin: 40 10 50 30;">
      <div id="schilderijholder" style="text-align: center; width: 100%; height: 100%;">
          <div id="schilderij" style=" height: 480px; width: 480px; text-align: center; vertical-align: middle; display: table-cell;">
            <img src="../Assets/Schilderijen/normal/01.jpg" width="399" height="480" align="center" />
            </div>
          </div>
        <div id="pageControl">
        <span class="left">
          <a href="schilderijen2.html"></a> </span>
          <span class="right">
          <a href="02.html">Volgende</a>
            </span>
          </div>
      </div>
     </div>
What I've tried:
     - "margin: 0 auto;" on the schilderij div
     - "position: relative;" on the schilderijholder div and "position: absolute; left: 50%; margin-left: -240px;" on the schilderij div
But these both don't work.
Does anybody know a solution for this, or maybe has something to put me on the right way?
Thanks in advance!

Let's fix your code first:
<div class="leftWrapper" style="float: left; width: 68%; height: 100%;">
    <div class="content" style="margin: 40px 10px 50px 30px;">
      <div id="schilderijholder" style="text-align: center; width: 100%; height: 100%;">
          <div id="schilderij" style=" height: 480px; width: 480px; text-align: center; vertical-align: middle; display: table-cell;">
            <img src="../Assets/Schilderijen/normal/01.jpg" width="399" height="480" align="center" />
            </div>
          </div>
        <div id="pageControl">
        <span class="left">
          <a href="schilderijen2.html"></a> </span>
          <span class="right">
          <a href="02.html">Volgende</a>
            </span>
          </div>
      </div>
     </div>
Why do you need the div#schilderij at all? Seems unnecessary to me.
Then you would need the display:table-cell on the parent to this div, not on the div#schilderij, which has basically the same dimensions as the image. But I think this is all too complicated. Why not just this?
<div class="leftWrapper" style="float: left; width: 68%;">
    <div class="content" style="margin: 40px 10px 50px 30px;">
      <div id="schilderijholder" style="text-align: center;">
            <img src="../Assets/Schilderijen/normal/01.jpg" width="399" height="480" align="center" />
            </div>
          </div>
        <div id="pageControl">
        <span class="left">
          <a href="schilderijen2.html"></a> </span>
          <span class="right">
          <a href="02.html">Volgende</a>
            </span>
          </div>
      </div>
     </div>

Looping table cells....... is it possible to loop more than one table cell?

Hi there
Hope everyone is doing well
I have been using the addt looper wizard and it works great.....
I usually put all the things I want to loop into one cell.... then select all the things and apply the looper.... which works fine....
But..... it is hard to align all the elements I want to loop
I have been using transparent gif images to space the loops evenly but when I space dynamic taxt on top of each other there is a large gap.....
It is a nightmare to get it looking even
Ok say I want to loop this.....
A thumbnail
Product ID
Price
It would look like this
A thumbnail
Product ID
Price
Because I cannot reduce the space between the lines......
So I would like to place all the different elements in separate table cells and loop them..... I have tried and get really strange results....
When you look at most online shops, their product pages have a thumbnail image the id, price, description, etc.... all spaced evenly.... and looks like is looped...... So.... how do I do it?
Is there any easier way to align the things I want to loop?
Any help would be great

Hi there
I seem to have figured out how to loop cells....
Should have thought of it earliar but anyway
Was easy....
Just create a looped (repeat) region and insert a table into the region and edit the table to align all the looped elements easily....
Cool

Read Only and HTML Table Cell Attributes

Hi Guys,
I believe i have come accross a bug - i'm been working on a form that can be filled out and printed - when going into print for sake of the output looking nice i set the form element to read-only.
As soon as an element such as a drop down box, text feild, text area, etc which display as "[selected value]" in plain text in read only mode, are changed to the read only mode apex seem to ignore the html table cell attributes.
For example i have a id number in the top left and then a version number in the top right. Both use a text feild; the top left uses 'width="100%"' for it's HTML Table Cell Attribute to push the right cell to the right. and the right cell has 'align="right"'. Now this works fine when read only is off... but as soon as read only is on, both the width and the alignment are totally ignored, and i can't find any sign of them in the code.
Because this is for printing; using the "disable" on the form element instead of "read only" function, isn't appropriate as disabled will make the elements faded and hard to read when printed, and keeping the elements as is will allow the user to edit information on the print screen - which is not appropriate.
Is this a bug? Will it be fixed soon? Is there any work around?
Cheers,
Alex

Use the "Read Only Element Table Cell(s) Attributes" in the Read Only region of the Item edit form.
Scott

How can I add dots after text to fill the remaining space in a table cell?

What is the most efficient way to add dots after text to fill the remaining space in a table cell? I know it is possible using tabs but is this possible using a table?

You can put a tab inside a table cell using Option+Tab
Then just set the right-aligned tab stop and the right edge of the table cell and add the leader.

Adding a link to a table cell question

ho can i add a link into a cell containing an image without increasing its size?
I am trying to make a link out of a table cell containing an image.
the problem is that the highlight frame around the image increases the size of the cell (and i cant have this since i imported all the small table images from photoshop wich constitute a big image).

no i am just exporting fragmented gif images from photoshop that i want to assemble again in dreamweaver through a table.
when i apply the link to one of the cells, dreamweaver increases its size (by 1 or 2 pixels) wich causes border gaps between cells and i cant have that.
i am using this cell as a button. all i want is to apply a link to a cell containing an image without modifying its size.
here's the code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    background-color: #000;
a:link {
    text-decoration: none;
a:visited {
    text-decoration: none;
    color: #03C;
a:hover {
    text-decoration: none;
    color: #F96;
a:active {
    text-decoration: none;
    color: #969;
a {
    font-size: 0px;
</style>
</head>
<body>
<table width="1280" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td width="309"><img src="HomeImages/Home_01.gif" width="309" height="221" /></td>
    <td width="110"><img src="HomeImages/Home_02.gif" width="110" height="221" /></td>
    <td width="111"><img src="HomeImages/Home_03.gif" width="111" height="221" /></td>
    <td width="142"><img src="HomeImages/Home_04.gif" width="142" height="221" /></td>
    <td width="313"><img src="HomeImages/Home_05.gif" width="316" height="221" /></td>
    <td width="262"><img src="HomeImages/Home_06.gif" width="292" height="221" /></td>
</tr>
<tr>
    <td><img src="HomeImages/Home_07.gif" width="309" height="95" /></td>
    <td><img src="HomeImages/Home_08.gif" width="110" height="95" /></td>
    <td><img src="HomeImages/Home_09.gif" width="111" height="95" /></td>
    <td><img src="HomeImages/Home_10.gif" width="142" height="94" /></td>
    <td><a href="DemoMenu.html"><img src="HomeImages/Home_11.gif" width="316" height="94" /></a></td>
    <td><img src="HomeImages/Home_12.gif" width="292" height="95" /></td>
</tr>
<tr>
    <td><img src="HomeImages/Home_13.gif" width="309" height="121" /></td>
    <td><img src="HomeImages/Home_14.gif" width="110" height="121" /></td>
    <td><img src="HomeImages/Home_15.gif" width="111" height="121" /></td>
    <td><img src="HomeImages/Home_16.gif" width="142" height="121" /></td>
    <td><img src="HomeImages/Home_17.gif" width="316" height="121" /></td>
    <td><img src="HomeImages/Home_18.gif" width="292" height="121" /></td>
</tr>
<tr>
    <td><img src="HomeImages/Home_19.gif" width="309" height="91" /></td>
    <td><img src="HomeImages/Home_20.gif" width="110" height="91" /></td>
    <td><img src="HomeImages/Home_21.gif" width="111" height="91" /></td>
    <td><img src="HomeImages/Home_22.gif" width="142" height="91" /></td>
    <td><img src="HomeImages/Home_23.gif" width="316" height="91" /></td>
    <td><img src="HomeImages/Home_24.gif" width="292" height="91" /></td>
</tr>
<tr>
    <td><img src="HomeImages/Home_25.gif" width="309" height="142" /></td>
    <td><img src="HomeImages/Home_26.gif" width="110" height="142" /></td>
    <td><img src="HomeImages/Home_27.gif" width="111" height="142" /></td>
    <td><img src="HomeImages/Home_28.gif" width="142" height="142" /></td>
    <td><img src="HomeImages/Home_29.gif" width="316" height="142" /></td>
    <td><img src="HomeImages/Home_30.gif" width="292" height="142" /></td>
</tr>
<tr>
    <td><img src="HomeImages/Home_31.gif" width="309" height="94" /></td>
    <td><img src="HomeImages/Home_32.gif" width="110" height="94" /></td>
    <td><img src="HomeImages/Home_33.gif" width="111" height="94" /></td>
    <td><img src="HomeImages/Home_34.gif" width="142" height="94" /></td>
    <td><img src="HomeImages/Home_35.gif" width="316" height="94" /></td>
    <td><img src="HomeImages/Home_36.gif" width="292" height="94" /></td>
</tr>
<tr>
    <td><img src="HomeImages/Home_37.gif" width="309" height="124" /></td>
    <td><img src="HomeImages/Home_38.gif" width="110" height="124" /></td>
    <td><img src="HomeImages/Home_39.gif" width="111" height="124" /></td>
    <td><img src="HomeImages/Home_40.gif" width="142" height="124" /></td>
    <td><img src="HomeImages/Home_41.gif" width="316" height="124" /></td>
    <td><img src="HomeImages/Home_42.gif" width="292" height="124" /></td>
</tr>
<tr>
    <td><img src="HomeImages/Home_43.gif" width="309" height="109" /></td>
    <td><img src="HomeImages/Home_44.gif" width="110" height="109" /></td>
    <td><img src="HomeImages/Home_45.gif" width="111" height="109" /></td>
    <td><img src="HomeImages/Home_46.gif" width="142" height="109" /></td>
    <td><img src="HomeImages/Home_47.gif" width="316" height="109" /></td>
    <td><img src="HomeImages/Home_48.gif" width="292" height="109" /></td>
</tr>
<tr>
    <td><img src="HomeImages/Home_49.gif" width="309" height="600" /></td>
    <td><img src="HomeImages/Home_50.gif" width="110" height="600" /></td>
    <td><img src="HomeImages/Home_51.gif" width="111" height="600" /></td>
    <td><img src="HomeImages/Home_52.gif" width="142" height="600" /></td>
    <td><img src="HomeImages/Home_53.gif" width="316" height="600" /></td>
    <td><img src="HomeImages/Home_54.gif" width="292" height="600" /></td>
</tr>
</table>
</body>
</html>

Straddled FM Table Cells Not Merged in WebHelp

Using TCS2 on Win XP, generating WebHelp — my straddled table cells in FM are not merged in WebHelp.
Is this a known problem, or is there a way to make this work?
Thanks!

Hi Mike,
I'm confused to where you applied the vertical alignment. Normally, I would set this for the table cells and not the table.
CSS has indeed an order in rendering: There is a point system for determining the CSS to apply. See http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css-specific ity/ for a short introduction.
And as an extra to the point system, the place where the styling is present, also determines the styling. Browsers use the following hierarchy (in descending order)
User style sheet defined in the browser.
Inline styling.
Style block in page.
External style sheet
You can overwrite styling from a lower order using the !important declaration. You can use this to make sure that inline styling will not be able to overwrite styles from your style sheet. (Unless the inline styles use !important themselves.) Example:
table.mytable td {
vertical-align: middle !important;
This will make all the content of table cells in the table with the class mytable to be vertically centered.
Greet,
Willam

Getting text to the top of a table cell

I'm sorry, I have asked this before but I still have nothing that works.
In a table I want the text to start at the top of the cell. I can force it with a clear gif and the end, but surely that is not right. It often works OK in Safari and Opera, but not in Firefox or IE.
I have copied some code below. It seems to me that the text should be aligning top, but it remain vertically centred in live view and all browsers (MAC).
What am I not seeing?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="properllers.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="880" border="0" align="center" cellpadding="0" cellspacing="0" class="top">
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td height="500"> </td>
    <td> </td>
    <td><h1 class="top">Text test header</h1>
      <p class="top">Berci accuptatet facerum, simus, quatiae pori tem arum id et exces aute erum inciumquo temquos essi nem utam, int aut harionsequo entintius solum est in consequo odi dolenimpe laborum se vel iliquo voluptas ex entorerum rest venimaxima sit am aut arumquam, tet que necererchil et mo vid ut mo ilic totaquam apitatem. Et illaboratum hilleni hillab iusaperunt landunt inctat.<br />
        Mus, ut eum ut ut omni qui aliquas peribus.<br />
    Us repudit, volupti ssequid modionseque pero consernatur? Qui que volorei umquae dem aut hilis am, cus, sequam quid ullam, idera della vent errovitis nobis minia simus et quos eum de cuptaec turiorio. Nequaspercia alis andae moluptae. Vid quunt enihit la nempores volupta alibus, occaborum ist odi volorepres que eum quo id underio tem res dolute omnienis in porro imoluptas doluptat im faccus re porem rero comnihicim e</p></td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
</table>
</body>
</html>

The default alignment in a table cell is LEFT MIDDLE, i.e., left horizontal and middle vertical. If you have no specification in your code for anything other than that, then that's what you get. I see no such specifications in your code, so your symptoms are not surprising. To make things align to the top of a table cell (in HTML4.01) you would use <td valign="top"> or in XHTML you would use CSS to bring the content to the top of the cell, e.g., <td style="vertical-align:top"> (inline CSS shown for clarity).
Be aware that text contained within a paragraph or an <h#> tag WILL HAVE A TOP MARGIN, so if you want that text to be flush with the top of the cell, you will have to control that top margin on the container tag, too.
In your case, I'm assuming that this is one of your attempts to get to the top of the cell -
<td><h1 class="top">Text test header</h1>
But we have no idea what rule is specified by the class="top". At any rate, you will have only affected the alignment of the text within the <h1> tag and not within the table cell by that. Perhaps <td class="top"> would be better? But best would be (if you wanted ALL content in the table to be at the top of the cells) to use a descendent selector like -
table#whatever td { vertical-align:top; }
and then give that table the id="whatever".

Background Image In Table Cell

I'm not sure what I'm doing wrong or missing here. This is the first time that I'm using an image as a background. I've made a table with a 100% width with 3 colums and 3 rows. The left and right table cells have been merged and the 3 middle rows are at a width of 938 pixels. I have cropped the images correctly. The right column lines up perfectly, but the left column does not line up like it's supposed to with the image. You can take a look at it by going to http://www.wattsconcepts.com/new
Here is the code below if anyone wants to take a look at it. Any help in solving this is greatly appreciated. I am using Dreamweaver CS5.5
Thank you for your time!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Watts Concepts - Kentucky Web Design - Harrodsburg, Kentucky</title>
<style type="text/css">
body {
          margin-left: 0px;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
          background-color: #000;
          background-image: url();
</style>
</head>
<body>
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td rowspan="3" align="left" valign="top" background="images/left-index.jpg"> </td>
    <td width="938" align="center" valign="top"><img src="images/logo-index.jpg" width="938" height="172" /></td>
    <td rowspan="3" align="left" valign="top" background="images/right-index.jpg"> </td>
</tr>
<tr>
    <td align="center" valign="top"><img src="images/eye-index.jpg" width="938" height="296" alt="Reach Your Audience Today" /></td>
</tr>
<tr>
    <td align="center" valign="top"><img src="images/test-index.jpg" width="938" height="197" /></td>
</tr>
</table>
</body>
</html>

Your HTML code should ideally be as follows:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Watts Concepts - Kentucky Web Design - Harrodsburg, Kentucky</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #000;
</style>
</head>
<body>
<table width="938px" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td width="938" align="center" valign="top"><img src="images/logo-index.jpg" width="938" height="172" /></td>
</tr>
<tr>
    <td align="center" valign="top"><img src="images/eye-index.jpg" width="938" height="296" alt="Reach Your Audience Today" /></td>
</tr>
<tr>
    <td align="center" valign="top"><img src="images/test-index.jpg" width="938" height="197" /></td>
</tr>
</table>
</body>
</html>
Also, you don't need 3 columns for this website. 1 column and 3 rows should do. Also, never use 100% for <table> width. It's bad practice as you're making your site fluid which will render your site to malfunction on some browsers
And you had the entire 3 sections as 1 image as your CSS body background-image. This is bad practice. Crop only what you want for each section, never give the entire merged site as 1 image.
Try the code I've given you above and it should work perfect.
A quick tip: Try learning and using DIV with pure CSS styling instead of tables. Tables are a thing of the past. You could just google it and you have tons of free resources on how to create a site using DIV. Also, there's a beautiful tutorial posted by one of our senior members here: http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt2.html that explains how to create HTML5 site with Pure CSS styling using DIV tags.
Cheers,
ST

Table Cell Alignment

Similar Messages

Maybe you are looking for