I'm having an object in a table and I'm unable to set vertical align (it doesn't seem to work).
Why is that?
Example:
http://jsfiddle.net/PHDWz/1/
When I give the td a height.. the content is vertical aligned in the middle....
<table cellspacing="0">
<thead>
<tr>
<th scope="col" style="width: 180px">Description</th>
<th scope="col">Textarea</th>
</tr>
</thead>
<tbody>
<tr>
<td height="400">Bla bla bla! Write something if you like! </td>
<td>
<textarea></textarea> <span><img src="http://www.qualtrics.com/university/wp-content/plugins/wp-print/images/printer_famfamfam.gif" alt="printer"> A printer!</span>
</td>
</tbody>
</table>
just add an additional column to avoid the "A printer!" link being forced to be kind of attached as align-bottom to the textarea. In your css you may omit the vertical-align for the span as you have this duplicated in the outer td.
<table cellspacing="0">
<thead>
<tr>
<th scope="col" style="width: 180px">Description</th>
<th scope="col" colspan="2">Textarea</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bla bla bla! Write something if you like! </td>
<td><textarea></textarea></td>
<td><span><img src="http://www.qualtrics.com/university/wp-content/plugins/wp-print/images/printer_famfamfam.gif" alt="printer"> A printer!</span>
</td>
</tbody>
The text in the left column sits in the middle vertically when I extend the textbox. This is using Safari, please elaborate if something else
Related
I am using the CSS framework Foundation for Email to create a responsive email template. My email design has tiles stacked next to each other, but I can't create the gap between each other using raw Foundation.
My hacky solution involves using css property border to create the visual gaps between the tiles. I am wondering if there is a better solution that what I have tried.
My code at CodePen has two tables. The first table is the table I would like to fix without using any hacky solutions. My second fix involves applying the border css property to visually create the desired gap.
I am looking for a solution that where I don't need to do any hacky solutions like what I've done for the second table.
Desired look: https://imgur.com/a/CiyUUs3
Code: https://codepen.io/anon/pen/qYzGEN
border is not a bad way to go. It's widely supported by email clients and it since you're using it as a style sheet, it can be adjusted depending on the size of the email width through #media queries. The only better way might be <table cellspacing="10"> to force a space between the tables.
The drawback to what you are doinf is that Outlook only has partial support background-color The same with Android. So in some email clients you're not going to have have a white background. My suggestion is to incorporate a 1px border around each table cell style="border: 1px solid #333333;" for differentiation.
<table class="row" cellspacing="10" border="1">
<tr>
<td class="small-12 large-4 tile hack" style="border: 1px solid #333;">Tile 3</td>
<td class="small-12 large-4 tile hack" style="border: 1px solid #333;">Tile 4</td>
<td class="small-12 large-4 tile hack" style="border: 1px solid #333;">Tile 5</td>
</tr>
</table>
I hope that gives you some ideas.
Good luck.
If you don't want to use border then strap yourself in for a very busy looking document. One of the reasons I don't like bootstrap-like frameworks, your at the mercy of a hundred different inline classes.
Foundation 2.2 describes columns for tables as such:
At the top level, a column is a <th> with the class .columns.
Inside of the <th> is another full table. The content of your column goes inside of a <th>. Right below that table header should be another <th> with a class of .expander. This empty element helps the column expand to be full-width on small screens.
Essentially saying, your going to be doing a lot of nesting. The structure will resemble something like this according to Foundation 2.2:
<th class="columns">
<table>
<tr>
<th>CONTENT HERE</th>
<th class="expander"></th>
</tr>
</table>
</th>
...repeat...
However, in your particular circumstance, you need to wrap them in a row because Foundation rows handle columns:
A row is a <table> with a <tbody> and <tr>. Inside of this <tr>, you'll place each individual column. The <table> also has the class .row.
So you get the point, more nesting unfortunately. To answer the question specifically using what I think is the structure Foundation has documented, you would need to make 1 row for each level. Meaning Tile 1&2 have their own row, Tile 3&4&5 have their own and so forth. This gives you the flexibility of the rest of their inline styling classes and aligning classes since you'll be doing it the 'Foundation' way, whatever that means.
Now when testing this, I didn't see any adverse complications while omitting the .expander class, but since they recommend using it, I would just use it per their guidelines.
Here is a revised codepen snippet: https://codepen.io/anon/pen/BxgXJZ
The revision I made is highlighted in red to show boundaries and white to show content for a quick visual aide. Styling and aligning I'll leave up to the scope of your project. This is responsive friendly as your's included classes for it too.
In the case of link-rot, here is the code snippet:
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-6 columns">
<table>
<tr>
<th>TILE 1</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-6 columns">
<table>
<tr>
<th>TILE 2</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 3</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 4</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 5</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-8 columns" >
<table>
<tr>
<th>TILE 6</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 7</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
If you don't want to go with borders, below is an example of how the code will look, basically a lot of tables nested into 1.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="49%" bgcolor="#000000"> </td>
<td width="20"> </td>
<td width="49%" bgcolor="#000000"> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="32%" bgcolor="#000000"> </td>
<td width="20"> </td>
<td width="32%" bgcolor="#000000"> </td>
<td width="20"> </td>
<td width="32%" bgcolor="#000000"> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="66%" bgcolor="#000000"> </td>
<td width="20"> </td>
<td width="32%" bgcolor="#000000"> </td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
Hope this gives you an idea of how to your result will look (code view).
I have a table inside table in html as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr>
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{.quantity * .rate}</td>
</tr>
{/items}
</tbody>
</table>
</tr>
{/orders}
</tbody>
</table>
I get the output as shown below:
Why I get such an output? I expected to see nested tables.
Your HTML has several errors, starting with this:
{#orders}
As others have mentioned, this is also bad:
<tr>↩ <table class="sortable draggable row-details"
Do yourself a big favor and start using an HTML validator like W3C's. It will find problems like this quickly. (It will also find other things to complain about that you might not need to fix, but when it helps, it will save a lot of time.)
Also, start using the Chrome inspector to see what it's done when your markup goes haywire. In this case, you can see that Chrome closed your first table, instead of nesting it. When Chrome messes with your HTML like this, it's a sign you might have an error in that spot.
</tr></tbody></table>
{#items}
{/items}
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<table>
<tr>
<td> <!-- must be in td -->
<table> <!-- nested table -->
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
your nested table need to be inside of td or th.
You need to nest the child <table> tag inside a <td> tag, not inside a <tr> tag. Doing this should make it display properly, as only a <td> or <th> tag can go directly inside a <tr> tag.
The <table> tag needs to be inside <td> or <th> tag for it to be nested. In your code, you have put the <table> tag as a child of <tr> tag which is wrong. It should be child of <td> or <th>.
Inserting <td> or <th> between <tr> and <table> will give the output correctly.
Here is working link for reference:
Nested Tables in HTML
Example:
<table border="1">
<thead>
<tr>
<th>Item 1
<th>Item 2
</tr>
</thead>
<tbody>
<tr>
<td>
<table border="1">
<tr>
<td>1
<td>2
</tr>
<tr>
<td>1
<td>2
</tr>
</table>
<td>A
</tr>
</tbody>
</table>
This webapge I'm working on looks like this:
The HTML is loosely like this:
<div class="title">
<table>
<tr>
<td width="35%">Table 1a Header</td>
<td width="65%">Table 2a Header</td>
</tr>
</table>
</div>
<div class="padding-all">
<div class="body" style="width: 100%">
<div><table> <!-- table 1b... --></div>
<div><table> <!-- empty table for spacing --></div>
<div><table> <!-- table 2b... --></div>
</div>
</div>
What I would like to achieve is either:
1) Have the text in my <div class="title"> at the top align above the tables inside of my <div class="body">
OR
2) Have the "top" rows inside of the tables span the entire width of the page, so that there is no black whitespace, in essence making it appear similar to how the current title div appears.
Either way, I need the text for "1a" to align with "1b" and the same for 2a/2b. As well as have it with a gray background that spans the width of the page.
I'm much more of a developer than I am a designer and I cannot seem to figure out how I can get this to work. I've fudged around with the percentages for the title div's table data cells, but this only works on certain resolutions, otherwise it doesn't display correctly. What else can I do?
Depending on what you're trying to accomplish as a whole, one option is to embed your tables.
See my example in this jsfiddle where I've used the following code:
<table>
<thead>
<tr>
<th width="2%"></th>
<th width="33%">Table 1a Header</th>
<th width="2%"></th>
<th width="63%">Table 2a Header</th>
</tr>
<tr height="10px">
<td colspan="4"></td>
</tr>
<tr>
<td width="2%"></td>
<th width="33%">Table1b Header</th>
<td width="2%"></td>
<th width="63%">Table2b Header</th>
</tr>
</thead>
<tbody>
<tr>
<td width="2%"></td>
<td width="33%">
<table><!-- Content --></table>
</td>
<td width="2%"></td>
<td width="63%">
<table><!-- Content --></table>
</td>
</tr>
</tbody>
</table>
I am not really sure if there is a way to do this, and as of now I am thinking I will just make a separate element with absolute positioning and place it in the proper position.
This is what I would like to do with the table... Is it even possible? Right now I have the table that you can see part of to the right, but I was just trying to think of a way to do this.
I have a normal table layout as of now: But take a look at the fiddle: http://jsfiddle.net/W3Tvm/
I guess the main challenge will be trying to keep the border-radius
<table class="overviewTable">
<thead>
<tr>
<th colspan="5">
FAN FREE TERMINALS</th>
</tr>
</thead>
<thead class="posiOverviewPN">
<tr>
<th class="txHeader">
TX4200E</th>
<th class="ksHeader">
KS6700</th>
<th class="ksHeader">
KS7200</th>
<th class="ksHeader">
KS7500</th>
<th class="ksHeader">
KS7700</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img height="68px" src="../posiflex/images/tx-4200.png" width="120px"></td>
<td>
<img height="108px" src="../posiflex/images/ks6700.png" width="120px"></td>
<td>
<img height="109px" src="../posiflex/images/ks7200.png" width="120px"></td>
<td>
<img height="117px" src="../posiflex/images/ks7500.png" width="120px"></td>
<td>
<img height="119px" src="../posiflex/images/ks7700.png" width="120px"></td>
</tr>
</tbody>
</table>
I believe what you are wanting to do is basic table structuring: http://jsfiddle.net/9VULt/
All you need to do is have empty th/td cells:
<table>
<thead>
<tr>
<th><!--empty--></th>
<th>TX42</th>
</tr>
<tr>
<th><!--empty--></th>
<th>image</th>
</tr>
</thead>
<tbody>
<tr>
<td>Advantage</td>
<td>Industrial grade...</td>
</tr>
</tbody>
</table>
So far, I'm doing this programmatically using VB.net/ASP.net:
<table cellspacing="0" cellpadding="4" border="0" style="border-
width:0px;width:100%;border-collapse:collapse;font-size:12px;">
<tr>
<td colspan="6"></td>
<td align="center" colspan="3" style="background-color:#F0D3D3;text-
decoration:underline;">SET</td>
<td colspan="2" style="background-color:#CFF5CE;"></td>
<td align="center" colspan="3" style="background-color:#BEE0F7;text-
decoration:underline;">REM</td>
</tr>
<tr>
<th style="width:70px;">M</th>
<th style="width:70px;">PG</th>
<th style="width:70px;">PV</th>
<th style="width:70px;">PDD</th>
<th style="width:40px;">R</th>
<th style="width:55px;">I #</th>
<th style="background-color:#F0D3D3;width:70px;">P A</th>
<th style="background-color:#F0D3D3;width:70px;">U D</th>
<th style="background-color:#F0D3D3;width:70px;">B P</th>
<th style="background-color:#CFF5CE;width:70px;">P U</th>
<th style="background-color:#CFF5CE;width:70px;">D E</th>
<th style="background-color:#BEE0F7;width:70px;">P</th>
<th style="background-color:#BEE0F7;width:70px;">U D</th>
<th style="background-color:#BEE0F7;width:70px;">B P</th>
</tr>
</table>
<div style="width:100%;clear:both;text-align:left;margin:0;">
<div style="width:375px;float:left;margin:0;display:block;">
<img onclick="change(this.parent);" src="minus99.jpg" style="border-width:0px;" />
<span style="font-weight:bold;font-size:16px;">Test Company</span>
</div>
<div style="background-
color:#F0D3D3;width:210px;float:left;margin:0;display:block;"></div>
<div style="background-
color:#CFF5CE;width:140px;float:left;margin:0;display:block;"></div>
<div style="background-
color:#BEE0F7;width:210px;float:right;padding:0;margin:0;display:block;"></div>
</div>
This should give me four DIVS inside a container DIV. Here's what it's coming out as:
The correct blocks above the non-inline blocks are from a table with the same exact widths as the ones I'm using on the Divs. There isn't any CSS adding pixels to them, I don't think. I need to line these up, and I can't figure out where my problem is here.
You can use instead of divs the colspan="[number]", for example:
<table cellspacing="0" cellpadding="4" border="0" style="border-width:0px;width:100%;border-collapse:collapse;font-size:12px;">
<tr>
<td colspan="6"></td>
<td align="center" colspan="3" style="background-color:#F0D3D3;text-decoration:underline;">SET</td>
<td colspan="2" style="background-color:#CFF5CE;"></td>
<td align="center" colspan="3" style="background-color:#BEE0F7;text-decoration:underline;">REM</td>
</tr>
<tr>
<th style="width:70px;">M</th>
<th style="width:70px;">PG</th>
<th style="width:70px;">PV</th>
<th style="width:70px;">PDD</th>
<th style="width:40px;">R</th>
<th style="width:55px;">I #</th>
<th style="background-color:#F0D3D3;width:70px;">P A</th>
<th style="background-color:#F0D3D3;width:70px;">U D</th>
<th style="background-color:#F0D3D3;width:70px;">B P</th>
<th style="background-color:#CFF5CE;width:70px;">P U</th>
<th style="background-color:#CFF5CE;width:70px;">D E</th>
<th style="background-color:#BEE0F7;width:70px;">P</th>
<th style="background-color:#BEE0F7;width:70px;">U D</th>
<th style="background-color:#BEE0F7;width:70px;">B P</th>
</tr>
<tr>
<td colspan="6">
<img onclick="change(this.parent);" src="minus99.jpg" style="border-width:0px;" />
<span style="font-weight:bold;font-size:16px;">Test Company</span>
</td>
<td colspan="3" style="background-color:#F0D3D3;"></td>
<td colspan="2" style="background-color:#CFF5CE;"></td>
<td colspan="3" style="background-color:#BEE0F7;"></td>
</tr>
</table>
Hoped i helped you.. =)
Width: 100% on the table overrides individual column widths. In your table, there are 13 <th>, and each will have a width of 1/13:th of the table's width. A width property on a <th> doesn't do anything. You could force it by adding display: inline-block to the <th>, but I wouldn't want to go that way.
Also, you should set the pink and green divs to float: right in order to remove the white inbetween green and blue (note however that you'll have to change the order of the divs in your code).
Also, I'd suggest using a table instead if you're aiming to present tabular data.
Did you put cellspacing="0" cellpadding="0" on the table? If not, that might be where the difference is coming from.
Or maybe border.
Can you include the table header?