I am looking for some html help. How would I go about moving a text block centrally within a cell but also keeping their alignment left intact. I do not wish the text to be displayed all centered as I am going to be using an unordered list. I simply want the block of text to be moved in to the center of the cell.
Example of current scenario:
http://jsfiddle.net/AygnN/
<table id="sub-content" style="width: 100%;">
<tbody>
<tr>
<th>Departments</th>
<th>KPI Types</th>
<th>Bonus</th>
</tr>
<tr>
<td>
<ul>
<li>dfgsdgfdfg</li>
</ul>
</td>
<td>
<ul>
<li>sdfgsdfgsdfg</li>
</ul>
</td>
<td>
<ul>
<li>sdgsdfgsdffgsdgf</li>
</ul>
</td>
</tr>
</tbody>
</table>
If you have the <h1> tags as column headers, you should use actual table headers (<th> tags). Now, in the CSS you can say:
th { text-align:center; }
EDIT:
#sub-content td{ padding:0px 60px; }
and all table headers will be centered while all lists in the table will be aligned to the left.
This method is much more standard.
JSFiddle
You can put the text in a div and host the div inside the table cell. The text will follow the css style specified in div where as the div itself will be in center of the cell.
The example you have given does same kind of things. It rather divides the cell in multiple cells and put the text in the middle one.
Related
as of now I did all my reports in LaTex and only recently I started to use HTML (for many reasons). What I am looking for is the HTML solution for a text formatting. The problem is the following: in a list of N bullets each bullets should be formatted in this way:
bullet#1 [text-of-length1] <- space -> [text-of-length2]
bullet#2 [text-of-length3] <- space -> [text-of-length4]
the 4 lengths could be different, but I want the text [length2] and [4] (the 2nd text part in each bullet), to start at the same point in space.
In LaTex this is solved imposing a certain size of a box that contains the first part of the text, thus pushing the second part of the bullet to start only after this box.
I tried to write each text in a table cell and partially works, but now the text is not aligned to the bullet (as if the cell is aligned but the text is slightly off-set up, the vspace = "bottom" did not help).
<ul style="list-style-type:square">
<li><table style="display:inline"><tr><td width="100">test</td><td>test</td>
</tr></table></li>
<li><table style="display:inline"><tr><td width="100">test2</td>
<td>test2</td></tr></table></li>
</ul>
Any idea?
Thanks in advance.
Try setting the style vertical-align: baseline; to table cells. This will align the table cell contents with bullet.
td {
padding: 1;
vertical-align: baseline;
}
<style type="text/css">
td {
padding: 1;
vertical-align: baseline;
}
</style>
<ul style="list-style-type:square">
<li>
<table style="display:inline">
<tr>
<td width="100">test test test test<br/>test</td>
<td>test</td>
</tr>
</table>
</li>
<li>
<table style="display:inline">
<tr>
<td width="100">test2</td>
<td>test2</td>
</tr>
</table>
</li>
</ul>
I have a table with multiple columns. In one of the column rows I want to add 2 elements which will be next to each other. One text element and one icon. The icon has a fixed with, the text element needs to be dynamic and has to be truncated with ... when the column cannot stretch anymore.
This is the HTML:
<table>
<tr>
<td>
</td>
<td>
<span>Truncated text goes here</span>
<i class="icn sprite icn-name></i>
</td>
<td>
</td>
</tr>
</table>
How do I do this? Using display: table; will make the HTML all buggy.
As said in comments, if you allow text and image to stay in adiacent cells, you can try the following.
<table>
<tr>
<td>Truncated text goes here</td>
<td><img src="imageURL" /></td>
</tr>
</table>
You can use vertical-align:top; in td style to align text on the top of the cell. And then you can use the following to set image width.
td>img {
vertical-align:top;
display:inline-block;
width:80px;
}
Fiddle
UPDATE
If you don't want to add extra cells to your table, you can create an internal div inside the cell, display it with display:table; property, and then display both span and img with display:table-cell; property.
Fiddle
I added the <i> element in front of the <span> element and gave the <i> element a float: right; and the <span> element the truncate styles.
Works fine now!
I have the following rows in a css file
body {text-align: center;}
table {margin: 0 auto}
this causes to all text to be aligned to the middle.
but in somse inner 's I want the text to be aligned right or left
So I added
<table style="text-align:right;">
and the text was still centered.
what shoud I add ?
Your code actually works, it's just hard to tell in your example. Take a look at this fiddle:
http://jsfiddle.net/UzRdL/
Please add style="text-align:right" with td. i think it will be work.
thanks
I guess the table is centered due to the parent div (body). I'll use a div with 100% width and align the text inside it to the right
Or float the div or table to the rigth
If you want only some of the text in the table to be right alignment.
then
<table>
<tr>
<td> Text </td>
<td style='text-align:right'> This text is align to right </td>
<td style='text-align:left'> This text is align to the left </td>
</tr>
</table>
When you create a basic HTML table everything seems to stay in center of the table. I don't want this how can i stop this from happening?
I wish to use a 2 column html table one for column for a sidebar one for content. Because i have so much content the sidebar text (which is little) gos to the middle of column.
How do i align the text to stay to the top left of the columns?
In the <td> element that contains the lefthand sidebar, try specifying a style that aligns text to the top:
<td style="vertical-align: top">(Sidebar HTML code here)</td>
You can control the alignment of columns directly in your markup by using:
<td style="text-align: left; vertical-align: top;"></td>
or even just
<td align="left"></td>
This will work fine for a 2-column table, but Piccolomomo has the better plan if you are going to use it a lot. This might help you further if you need it:
http://www.w3schools.com/html/html_tables.asp
You can use CSS to change text aligning inside your table:
td {
text-align: left;
vertical-align: top;
}
For aligning text in table you have to use css.Without css or any style sheet you can't make them align.So you can use inline css or external css for that.
<style type="text/css">
table td{
text-align:left;
vertical-align:top;
}
</style>
<table>
<tr valign="top">
<td align="left">
Side Bar
</td>
<td>
Content
</td>
</tr>
</table>
I am trying to change the alignment (center) and background color of only certain pieces of text within a table-cell. I know how to do it for the whole cell, but how do you do it for only specific pieces of text?
<td>
<div style="text-align: right;">will be aligned right</div>
<div style="background-color: #999;">will have a gray background</div>
</td>
It's better if you do this properly through a css stylesheet, this is just for illustrative purposes.
Wrap the text to which you are interested in adding css in a span. Note that if you want the text centered in a column you probabaly want to apply "align:center" to the <td> and not the span.
For example:
<tr>
<td><span class="classForEverythingButCentering">not centered</span></td>
<td style="align:center">centered</td>
<td class="centered">differently centered
(if you setup a class named .centered or perhaps td.centered).</td>
</tr>