Here is a 3x3 table:
<html>
<body style="overflow:hidden;">
<style>
div.table_div {overflow:scroll;width:378px;height:117px;position:relative;}
table.TheTable {width:361px;height:100px;table-layout:fixed;border-collapse:collapse;border:1px solid #000000;}
td.TheTableColumnCell {font-size:16px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;border:1px solid #000000;}
</style>
<div class="table_div" id="table_div">
<table class="TheTable">
<tr id='firstTr'>
<td class="TheTableColumnCell">
<div onclick="alert('1');" style="position:absolute;font-size:16px;line-height:14px;background-color:#FFFF00;left:0px;top:4px;width:60px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 1</div>
<div onclick="alert('2');" style="position:absolute;font-size:16px;line-height:14px;background-color:#FFFF00;left:90px;top:4px;width:30px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 2</div>
<div onclick="alert('3');" style="position:absolute;font-size:16px;line-height:14px;background-color:#FFFF00;left:150px;top:4px;width:210px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 3</div>
</td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
<tr>
<td class="TheTableColumnCell">I'm</td>
<td class="TheTableColumnCell">Vertically</td>
<td class="TheTableColumnCell">Aligned Middle!</td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
</table>
</div>
</body>
</html>
If you cut-and-paste that code into an html file and open it in your browser, you will see that the div's act as an overlay onto my grid. This is sort-of like a Scheduling control (the grid represents each hour block).
The thing that's driving me crazy is that the I can't get the text inside the div tags to become vertically aligned in the middle. The actual td tags, no problem. But the div tags inside the td tag - nope!
I've read and tried everything here: http://phrogz.net/css/vertical-align/index.html
I've tried (as a style for the div): padding, margins, line-heights, etc.
EDIT: I think there is some confusion on the intent of this grid. The reason I use the div tags is to overlay "the yellow bar" over the grid. That means there could be multiple "yellow bars" inside of one td cell or it can span multiple cells. For example, my original html (assuming the first column is 12:00 AM) has three events in that first row. Event 1: 12:00 AM - 12:30 AM. Event 2: 12:45 - 1:00 AM (both in the same cell). Event 3: 1:15 AM - 3:00 AM (and it has overlapped two cells). Stuff like that. That's why the div tags.
Is there a single line in the div, try setting the line-height of the container to the same as the height of the container.
<div onclick="alert('1');" style="position:absolute;font-size:16px;line-height:24px;background-color:#FFFF00;left:0px;top:4px;width:60px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 1</div>
Here's a dramatically cleaned up version of your code with what I think is the answer you're looking for.
Edit:
http://jsfiddle.net/FXFF8/24/
The position:absolute takes your divs out of the flow of the table, and makes them ignore the standard vertical-align.
You might be able to fixed it by using spans instead of divs, and using position:relative instead of absolute.
Something like this:
http://jsfiddle.net/3s4VE/
Assuming you are asking how to get the content of the divs vertically centered within the divs.
Set the line-height to be the same as the height. Right now you have line-height:14px; height:24px.
Here's what it looks like if you set line-height:24px: http://jsfiddle.net/NytYh/1/
adding the event to the "TD" instead of div's wouldn't work for you?
<html>
<body style="overflow:hidden;">
<style>
div.table_div {overflow:scroll;width:378px;height:117px;position:relative;}
table.TheTable {width:361px;height:100px;table-layout:fixed;border-collapse:collapse;border:1px solid #000000;}
td.TheTableColumnCell {font-size:16px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;border:1px solid #000000;}
</style>
<div class="table_div" id="table_div">
<table class="TheTable">
<tr id='firstTr'>
<td class="TheTableColumnCell">
<span onclick="alert('1');" style="font-size:16px;line-height:14px;background-color:#FFFF00;left:0px;top:4px;width:60px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 1</span>
</td>
<td class="TheTableColumnCell">
<span onclick="alert('2');" style="font-size:16px;line-height:14px;background-color:#FFFF00;left:90px;top:4px;width:30px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 2</span>
</td>
<td class="TheTableColumnCell">
<span onclick="alert('3');" style="font-size:16px;line-height:14px;background-color:#FFFF00;left:150px;top:4px;width:210px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 3</span>
</td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
<tr>
<td class="TheTableColumnCell">I'm</td>
<td class="TheTableColumnCell">Vertically</td>
<td class="TheTableColumnCell">Aligned Middle!</td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
</table>
</div>
</body>
</html>
I guess that I understood. rs.
you can try this code:
<td align="center" valign="middle">
The align define the horizontal alignement and the Valign define vertical one.
got it?
regards!
Try this: vertical-align:text-top; text-align:center
http://jsfiddle.net/UxZr3/2/
Related
I'm trying to do something that should be fairly simple. I have a column of text in a table that has values from 1 to 18. I want the cell that has the text to align center. However, sometimes, the same cell needs to display an asterisk (*). When the asterisk is displayed, it should be aligned left in the same cell, while keeping the numbers themselves perfectly aligned.
I can't quite get it to align the right way
<table border=1>
<tr>
<td style="text-align:center" width=50>
<div>
<div style="float:left;">*</div>
<div>14</div>
</div>
</td>
</tr>
<tr>
<td align=center>
<div></div>
<div>16</div>
</td>
</tr>
</table>
Just give position: absolute to the div with asterisk, and your numbers will be always centered properly:
<table border=1>
<tr>
<td style="text-align:center" width=50>
<div>
<div style="position: absolute;">*</div>
<div>14</div>
</div>
</td>
</tr>
<tr>
<td align=center>
<div></div>
<div>16</div>
</td>
</tr>
</table>
In this case position: absolute tells: "Don't consider absolutely positioned div's dimensions". If you will inspect the div with number, you will see, that it takes the full width and height of parent element, like the div with asterisk is not in DOM.
May be my explanation is a little poor and not 100% correctly, but it should give you the basic understanding. For more info look through "position: absolute" area in this site or somewhere else: https://www.w3schools.com/css/css_positioning.asp
Iam trying to add html piece of code to an existing html page. I am trying to use a DIV inside TD, then display:inline css attribute for DIV, doesn't work as expected. Any reason why ?
<table>
<tr>
<td width="20%" class="oddrow"></td>
<td width="80%" class="oddrow-l">
<div style="display: inline;"> Hello</div>
<div style="display: inline;">
Hiii
</div>
</td>
</tr>
</table>
You have to set width for your table:
table {
width: 100%;
}
http://codepen.io/anon/pen/LKizB
add your display:inline to the td style as well. http://jsfiddle.net/v5Ld3/
<table>
<tr>
<td width="20%" class="oddrow"></td>
<td width="80%" class="oddrow-l" style"display: inline">
<div style"display: inline">Hello</div>
<div style"display: inline">Hiii</div>
</td>
</tr>
</table>
Use <span> instead of <div>. Also as others mentioned your table nor td have width defined, so they will use as small width as possible. span is inline anyway and could change that.
If you don't want the whole table being width: 100% you may just set width for the problematic column.
I have the following example
<table align="right" border="1" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
<div style="width: 100%; background-color: red">
test
</div>
If the code is run, the div will enter the floated table. The table will need to be floated so this can't change. Is there a way to stop the other content entering the floated element?
One solution is to give the table an explicit background color.
<table style="background:white; float:right" ...
See new JSFiddle.
The other answers all change other properties such as the relative widths or positions of the div and the table.
Try not to use depreciated HTML tags like align and border. Cellpadding and cellspacing can also be achieved with styles but I'll leave that as an exercise :) This will make the div take up as much space as is needed. If you know the size of the parent div which the table and this div are contained in, just set the width of the table and div to a fixed value.
<table style="float:right; border: 1px solid black;" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
<div style="float:left; background-color: red">
test
</div>
http://jsfiddle.net/Shnjt/
use this
<div style="90%; margin-left:auto; margin-right:auto;">
<table style="float:right;width:45%">
</table>
<div style="width:45%;background-color: red; float:left;">
test
</div>
</div>
If you want div and table to be floated you need to set width for both and css: float: left to the div and float: right to the table.
Otherwise you can try removing width:100% from your div and adding display: inline-block.
There is a css property that controls whether an element respect the previous floating element.
Here is the documentation: http://www.w3.org/wiki/CSS/Properties/clear
I do not know what you want to get, but that might help.
# Mr.Lister....
<div style="width: 100%; background-color: red;float:left;">
test
</div>
Float:left; will be helpful to your code.
Good Luck!
I am a bit of a noob with HTML and CSS. I am wondering what is the best way to:
1) Arrange 4 tables on a page in a square formation -- ie, each table is a quadrant, or
2) Put 4 tables within another table.
Any advice is appreciated.
Regards.
If you're want to split the page to a 2X2 table best way is to use Divs (also easier to apply css on divs)
<div style="width:auto;">
<div style="float:left; width:50%">
x-1,y-1
</div>
<div style="float:left; width:50%">
x-2,y-1
</div>
<div style="clear:both"></div>
</div>
<div style="width:auto;">
<div style="float:left; width:50%">
x-1,y-2
</div>
<div style="float:left; width:50%">
x-2,y-2
</div>
<div style="clear:both"></div>
</div>
http://css-discuss.incutio.com/wiki/Why_I_think_divs_are_better_than_tables
To answer the "Put 4 tables within another table." part of your question: as Jonthan Sampson said in his comment to your quesiton: create one table with two rows and two cells per row. In each of these cells, put one table within the td tags:
<table>
<tr>
<td>
<table>
<tr>
<td>
Table 1/4
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Table 2/4
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
Table 3/4
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Table 4/4
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td> Top left Information Here </td>
<td> Top right Information here </td>
</tr>
<tr>
<td> Bottom left Information Here </td>
<td> Bottom right Information here </td>
</tr>
</table>
JSFiddle
http://jsfiddle.net/DNYwc/
This seems to be reducible to the question “to display four elements in a two by two formation, should I use a table or some other method?” Whether the elements are tables or something else seems to be irrelevant to the basic question.
If the four elements logically constitute a 2 × 2 table, make it such a table in markup. If the two by two formation is just the preferred rendering in some situations, then you could some other approach, such as floats, something like
<div style="float: left">A</div>
<div>B</div>
<br clear=all>
<div style="float: left">C</div>
<div>D</div>
<br clear=all>
This would result in a 2 by 2 rendering if there is enough width, but in a narrow window, A, B, C, D would appear in a 4 by 1 formation. If you use a table, then a narrow window would force horizontal scrolling. The choice really depends on which alternative is better for the content and structure.
Honestly, it sounds like you want 1 table, 2 rows, 2 cells per row.
<table>
<tbody>
<tr>
<td>Top Left</td><td>Top Right</td>
</tr>
<tr>
<td>Bot Left</td><td>Bot Right</td>
</tr>
</tbody>
</table>
Fiddle: http://jsfiddle.net/jonathansampson/gy5YC/
If it's layout you're after, there's a better way...
Please note that although this may give you the layout structure you're desiring, using tables for non-tabular data (think of a spreadsheet) is an illegal use of the element.
If you're attempting to layout a page, there are far better options available to you. You could use four div elements, positioned in a fixed fashion to the viewport:
<div class="panels">
<div>Top Left</div>
<div>Top Right</div>
<div>Bottom Left</div>
<div>Bottom Right</div>
</div>
Fiddle: http://jsfiddle.net/jonathansampson/gy5YC/2/
I have a table with 2 columns
<table border="2">
<tr>
<td>
<div id="menupage" >
...
...
</div>
</td>
<td align="center" >
<div id="contentpage" >
...
...
</div>
</td>
</tr>
</table>
I want to keep always in top not in center if the size of <div id="contentpage" > is big
You can use the CSS vertical-align property to align the TD contents to the TOP:
vertical-align:top;
See this working Fiddle Example!
e.g.,
<table border="2">
<tr>
<td style="vertical-align:top;">
<div id="menupage">
...
</div>
</td>
<td align="center" style="vertical-align:top;">
<div id="contentpage" >
...
</div>
</td>
</tr>
</table>
You probably are looking at valign or vertical-align.
<td align="center" valign="top">
<div id="contentpage">
</div>
</td>
See http://jsfiddle.net/nivas/Y84pS/
Note that valign is a deprecated attribute (so are align and border. See Index of Attributes for a complete list.). The recommended way to get these functionality is via CSS, using vertical-align, text-align and border.
The second table in my jsfiddle example uses CSS, and gets the same functionality.
If you're going to use tables then you might as well just use valign.
eg: <div id="menupage" valign="top">
If you want to use CSS you can use vertical-align.
You could set all td's in your stylesheet like so:
td {
vertical-align: top;
}
I've no idea of your experience etc so I won't go on, but you should avoid tables for layout. You'll save yourself a lot of downvotes and "don't use tables" comments.