How do I left align text within a span tag
-
I have a table with some cells containing span tags that I use to display text values that my javascript code populates and that the user may not change. Other cells in this table contain input text boxes, which the user may change. And before cells containing a span or text box, I have a cell that contains the title of the data displayed in the adjacent cell. I want both the text boxes and the contents of the spans to be left aligned, and the titles to be right aligned, so I tried using the following CSS style decleration placed before the table elments I want justified:
span { text-align:left } /* span content - doesn't work */ table tr td { text-align:right } /* title cell */
This works well for the input boxes, which are normally left justified and aren't affected by the above style settings, and the titles, but not for the span contents. Why doesn't the span selector seem to work? What do I need to do to make the text in the spans left justify? Thank you -
I have a table with some cells containing span tags that I use to display text values that my javascript code populates and that the user may not change. Other cells in this table contain input text boxes, which the user may change. And before cells containing a span or text box, I have a cell that contains the title of the data displayed in the adjacent cell. I want both the text boxes and the contents of the spans to be left aligned, and the titles to be right aligned, so I tried using the following CSS style decleration placed before the table elments I want justified:
span { text-align:left } /* span content - doesn't work */ table tr td { text-align:right } /* title cell */
This works well for the input boxes, which are normally left justified and aren't affected by the above style settings, and the titles, but not for the span contents. Why doesn't the span selector seem to work? What do I need to do to make the text in the spans left justify? Thank youHTML has two types of elements, inline and block. <span> is inline element, and <td> is a block element. Inline elements do not have height or width. Thus, text alignment within such an element will not have any affect.
"We make a living by what we get, we make a life by what we give." --Winston Churchill
-
HTML has two types of elements, inline and block. <span> is inline element, and <td> is a block element. Inline elements do not have height or width. Thus, text alignment within such an element will not have any affect.
"We make a living by what we get, we make a life by what we give." --Winston Churchill
Thank you for replying. So if I understand you, the span nested in side of the table cell is being treated as an inline element, so ignores the text-alignment of the cell, but because it is an inline element also ignores any text-align-ment that I try to force on it with the CSS Style settings. Therefore, since the span'ed cells show on the right side of the cell, it must be the entire span that's being pushed over there by the table tr td CSS style selector. Correct?
-
Thank you for replying. So if I understand you, the span nested in side of the table cell is being treated as an inline element, so ignores the text-alignment of the cell, but because it is an inline element also ignores any text-align-ment that I try to force on it with the CSS Style settings. Therefore, since the span'ed cells show on the right side of the cell, it must be the entire span that's being pushed over there by the table tr td CSS style selector. Correct?
howardjr wrote:
So if I understand you, the span nested in side of the table cell is being treated as an inline element, so ignores the text-alignment of the cell, but because it is an inline element also ignores any text-align-ment that I try to force on it with the CSS Style settings.
No, the span element and the the text's alignment is controlled by the td element's alignment. The default behavior of the span element does not respond to the CSS text-alignment.
howardjr wrote:
Therefore, since the span'ed cells show on the right side of the cell, it must be the entire span that's being pushed over there by the table tr td CSS style selector.
Yes.
"We make a living by what we get, we make a life by what we give." --Winston Churchill
-
howardjr wrote:
So if I understand you, the span nested in side of the table cell is being treated as an inline element, so ignores the text-alignment of the cell, but because it is an inline element also ignores any text-align-ment that I try to force on it with the CSS Style settings.
No, the span element and the the text's alignment is controlled by the td element's alignment. The default behavior of the span element does not respond to the CSS text-alignment.
howardjr wrote:
Therefore, since the span'ed cells show on the right side of the cell, it must be the entire span that's being pushed over there by the table tr td CSS style selector.
Yes.
"We make a living by what we get, we make a life by what we give." --Winston Churchill
Thanks again :) I put back in align="right" into the td tags that I took them out of in favor of the style selector table tr td as it seemed as much trouble to put in a css class as it was to just use the align="right". Anyway, now I understand a this a bit more, to for that much this was good.
-
Thanks again :) I put back in align="right" into the td tags that I took them out of in favor of the style selector table tr td as it seemed as much trouble to put in a css class as it was to just use the align="right". Anyway, now I understand a this a bit more, to for that much this was good.
FYI, CSS1 didn't really support tables well. However, CSS2 has rectified that. You could have applied styles to the td elements using class attributes. Thus, you could alternate text alignment just by changing the class attribute.
"We make a living by what we get, we make a life by what we give." --Winston Churchill
-
FYI, CSS1 didn't really support tables well. However, CSS2 has rectified that. You could have applied styles to the td elements using class attributes. Thus, you could alternate text alignment just by changing the class attribute.
"We make a living by what we get, we make a life by what we give." --Winston Churchill
True, Therefore I would make one class for my data label cells and one for the data cells, which would make it clear to anyone looking at my HTML code what was being displayed in each type of column. But the point of my comment was that it would take as much typing to say align="right" in the label cell's td tags and nothing in the data cell tags as it would to create the classes and use them. The intent of my page is to display and change the dynamic HTML attributes so I can see how they work, so self-documenting isn't that important to me in this page. However, the lessons learned about using CSS classes on different tag items is. :) Thanks again.