I have two tables that align horizontally using this syntax:
<table width=100%>
<tr>
<td><table1 code goes here>
</td>
<td><table2 code goes here>
</td>
</tr>
</table>
This is all fine and dandy and they align if the tables have the same number of data rows. But if one has fewer than the other, then they are still aligned in the same positions, but the other table is shrunk, so they look like:
header
data
data
data header
data data
data data
data data
data
data
Is there any way to getthem to align from the top down, as well?
Like
header header
data data
data data
data data
data
data
data
data
data
How can I fix this?
You can use valign = top.
<table width=100%>
<tr>
<td valign="top"><table1 code goes here>
</td>
<td valign="top"><table2 code goes here>
</td>
</tr>
</table>
You need to use display: inline-block; for each table if using CSS
Else you can add <td valign="top"> for both tables in HTML
Adding a <td valign="top"> will solve your problem for sure. This tag vertically aligns the contents from the top making it stick to the top line.
Similarly you can also use some other values for valign as per your needs.
They are:
baseline
middle
bottom
Related
I am customizing forms in NetSuite and have gotten everything to work as I would want, except the footer. For some reason the text-align: center function is working based on the number of characters in the row of the footer, rather than the center of the page. Below are images of my code and print examples that show the error better. The only difference in the code between footer code images 1 and 2 is that I removed the word "number" in row 55 to depict the centering is based on characters.
Footer Code 1
Footer Print 1
Footer Code 2
Footer Print 2
If you were to show the borders on your tds you'd get a better sense of what's going on. Basically you are not providing hints for the td and table sizes so the normal table width processing is happening. ie. the tables will only be wide enough to hold the text so they appear to be text size based.
Also I suspect you have a lot more markup than you need. The following will give you what I think you are looking for. Note that you may want to play with padding to get the correct left and right alignments.
<macro id="nlfooter">
<hr />
<table class="footer" style="width: 100%;">
<tr>
<td align="left" colspan="4">email</td>
<td align="center" colspan="6">Phone</td>
<td align="right" colspan="4">Page info</td>
</tr>
<tr>
<td align="center" colspan="14">
<b>Thank you</b>
</td>
</tr>
</table>
</macro>
I am trying to create an HTML table where there are four columns and any number of rows. Inside this table, the first two columns are just normal cells. The latter two columns can have multiple rows WITHIN a row in the top-level table. My issue is how I can properly align the column separators, even if the length of the content in each cell is variable.
My attempt tries to make use of:
<td colspan=2>
Example of what I am trying to do: https://jsfiddle.net/hurnzhmq/
The things I am missing in the JSFiddle are:
There is no divider between the two rows separating Content3A/Content4A from Content3B/Content4B - I tried using the "bottom-border:none" for the last child, but that did not seem to work.
The column separators between Content3A/Content3B and Content4A/Content4B are not lined up with the header's column separator, and do not touch the ends of the table (there are gaps).
Any advice on how I might go about fixing this would be greatly appreciated!
I think you should use rowspan instead colspan
you can use code below
<html>
<table border=1 >
<tr>
<td>Header1</td>
<td>Header2</td>
<td>Header3</td>
<td>Header4</td>
</tr>
<!-- Content -->
<tr>
<td rowspan="2">Content1</td>
<td rowspan="2" >Content2</td>
<td > Content3A</td>
<td > Content2</td>
</tr>
<tr>
<td > Content3B</td>
<td > Content2</td>
</tr>
</table>
</html>
EDIT: I did not construct this table myself. A table absolutely shouldn't be constructed this way and is a fix I'm implementing in the future. But the back-end code unfortunately depends on this exact table structure-each inner table has it's own class names and id's and trigger functions, etc.
I've got this problem working with a table made up of multiple tables - One table is the table itself, another table makes up the header, or <thead>, and another table makes up the <tbody>-there are also divs within the table cells (<td>) it looks like this:
<div id="myTableContainer">
<table id="myTable">
<thead>
<table id="myTableHeader">
<tr>
<td>
<div>Header Data 1</div>
</td>
<td>
<div>Header Data 2</div>
</td>
</tr>
</table>
</thead>
<tbody>
<table id="myTableData">
<tr>
<td>
<div>Table Data 1</div>
</td>
<td>
<div>Table Data 2</div>
</td>
</tr>
</table>
</tbody>
</table>
</div>
The problem is that there's some javascript working in the background to resize these table cells based on how much text is in them, but I can't align the header cells with the with the rows below them properly with CSS. I've experimented with the table-layout property and giving each td a max/min-width, but I'm stuck as to getting all the data & columns aligned because if many columns are created, the table gradually mis-aligns. What's more, both the inner tables are generated dynamically, so it's not as simple as restructuring the table as a whole. This table has proved very difficult to work with as it was developed for IE5 or 6 (works in Quirks mode all the way)
Does anyone have any ideas or sure-fire solutions on how to align this table properly? Preferably a CSS-based solution?
If you can't picture it, my table basically looks like this (and gets gradually worse if more columns are inside of it)
I hope I explained this well enough, if more info is needed I will provide
You should not have <table> tags inside <thead> and <tbody>. Your code should just look like this:
<div id="myTableContainer">
<table id="myTable" border="1">
<thead>
<tr>
<td>
<div>Header Data 1</div>
</td>
<td>
<div>Header Data 2</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>Table Data 1</div>
</td>
<td>
<div>Table Data 2</div>
</td>
</tr>
</tbody>
</table>
</div>
I would correct the old code but in case you don't intend to, look for below hack:
I cannot think of a pure CSS solution. But how about CopyCSS (http://upshots.org/javascript/jquery-copy-style-copycss)?
You can call your copyCSS (you can selectively copy only width property). Question is how to detect if width of column changes?
For that you will have to take help of onresize event (http://www.w3schools.com/jsref/event_onresize.asp). For that you have to dynamically add onResize event to at least first row of your second (i.e. inside ) table.
I'm using this code on my wordpress site but I'm getting odd results. I want to divide the table row into two columns, but I've ended up just gluing an extra bit on the side. what am I doing wrong?
<table>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
<tr>
<td style="padding:0px;">
this is a test
</td>
<td style="padding:0px;">
as is this
</td>
</tr>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
</table>
and I get this weird little bit off the edge rather than the split I want:
Is it something to do with the aligned right image content in the table below possibly?
The number of columns in a table must be constant.
Add colspan="2" to your single cells.
A table has as many columns as the row with the most columns in it. If cells are missing from other rows, then they are left out from the rendering and cells are not stretched to fit.
Use colspan to make a cell take up multiple columns.
In your case, you don't appear to have tabular data at all, so don't use a table in the first place.
Your second row is two columns wide, but the remaining rows are still just one column in width. Either add a second column to each of the other rows, or extend the cells in the other columns so that they cover two columns, like this:
<tr>
<td style="padding:0px;" colspan=2>
deleted the content to make this less to read
</td>
</tr>
You'll need to do that for all the rows with just one column.
I'm messing around with the aesthetics of a site I'm building and have been left scratching my head on something that looks like it should be simple, or so I thought.
I am using a table to place the content of my the site into, and when I run it through my local host (Using XAMP) the scale of table <td> tags is how I want it, but when I host it through my godaddy account the <td>s in my main content <tr> are scaled differently (seems to be influenced by the header row).
Here's the link to my current page and you'll see the problem. (BTW the site is not finished so any spelling mistakes and stuff like that feel free to ignore :))
http://www.sittingducksfc.co.uk/
So how would I go about creating evenly sized <td>'s within that row? as you can see the furthest right <td> is squashed to the same scale as the loginbox at the top. I have been fiddling with it for a while but I'm probably missing some simple css but I haven't found any previous question with the same problem.
Regards
Mike
So the problem appears to by your stylesheet... You have the three <td> which all have the width of 33%
I am using Google Chrome 31.0.1650.63m and it shows up fine but other browsers may not, i would suggest to do the following change
<td colspan="1" style="background-color:white;text-align:center;width: 30%;height:30%;">
I would also suggest using a stylesheet as opposed to editing the style in-line
Hi all thanks for your responses.
From trail and error i have gone for a different approach and stacked multiple tables into my main div and that allows me to specify the particular widths of each td within that particular table.
From further investigation it can also be seen
here and i apologize for a repeat question.
Here is my example code.
<div>
<table width="100%" height="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="80%"></td>
<td width="20%"></td>
</tr>
</table>
<table width="100%" height="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="33%"></td>
<td width="34%"></td>
<td width="33%"></td>
</tr>
</table>
</div>
This can be stacked many times without each table affecting the other.