I'm trying to make three columns with the titles "Friday", "Saturday", and "Sunday". Each column will have a series of images that are embedded via embedly (which end up as <img> tags where I have a href in case you're wondering).
I'm having trouble getting the images to center nicely directly underneath the column headers because the images are different aspect ratios (not sure if I'm using the term correctly).
For example this picture is much wider than this picture.
Here is my code so far.
<table>
<tr>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<td><div class="featuredGame">
<p> Subway Series </p>
</div>
</td>
<td>
<div class="featuredGame">
<p> Subway Series </p>
</div>
</td>
<td>
<div class="featuredGame">
<p> Subway Series </p>
</div>
</td>
</tr>
<tr>
<td><div class="featuredGame">
<p> Subway Series </p>
</div>
</td>
<td>
<div class="featuredGame">
<p> Subway Series </p>
</div>
</td>
<td>
<div class="featuredGame">
<p> Subway Series </p>
</div>
</td>
</tr>
</table>
And the css for featuredGame:
NOTE the #featured tag is intentional. This table is encased within <div id="featured">
#featured .featuredGame {
position: relative;
height: auto;
width: 150px;
font-size: 1.0em;
}
th td {text-align:center;}
In you css block put
margin-left:auto;
margin-right:auto;
that should center it
your style rule is trying to apply styles to an element with an id="featured" AND a class="featuredGame. That's part of the reason it is failing. (At least without the embedly.) Remove the id and the styles start to work.
The images are very large Does embedly shrink them? If not, your table design will not hold them well in a standard resolution browser.
Try changing
th td {text-align:center;}
to
th, td {text-align:center;}
http://jsfiddle.net/blineberry/ubmW3/
Is that what you're looking for?
Related
I'm trying to write some HTML/CSS to display a certain row with some of the elements left-aligned and some of them in the center. This was my HTML code:
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<div class="mid">
<td> Subtotal </td>
<td> Tax </td>
<td> Total </td>
</div>
</tr>
And this is my CSS code:
.mid {
text-align: center;
}
.mainInfo {
font: bold 13px Tahoma;
}
#header {
background-color: #68891;
color: white;
}
But the last three elements are not moving to the center, and I really don't understand why not. I tried putting class="mid" in the <td> tags and that worked, but doesn't that defeat the purpose of DRY?
Fiddle Demo
You cannot put a div instead of td element.
You should validate your HTML code with w3 validator.
If you'll do so you'll see you get this error message:
document type does not allow element "DIV" here; missing one of "TH", "TD" start-tag
Maybe you can do it this way:
<table>
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<td class="center">Subtotal</td>
<td class="center">Tax</td>
<td class="center">Total</td>
</tr>
</table>
JSFiddle example
No, you should not put divs inside tr's or tables.
And you should not use tr's or td's without table-element.
<table>
<tr>
<td>hello world</td>
<!-- This is bare minimum to use tables properly -->
</tr>
</table>
You can insert whatever(not tr or td, but could start new table) you want inside TD-elements though.
It's possible to use other elements to replace these standard ones with css display-property set to table-row etc., but you should stick to conventional tags.
Use colspan/rowspan to span over multiple table columns or rows.
CSS classes are designed to be used as often you need/want to. Only IDs should appear once per page.
Of course you should always keep the DRY concept in mind but in your case it's totally fine. It wouldn't if you would set your .mid class to every <td> because in that case you could just set the properties directly to the <td> element.
middle is not a valid value for text-align, so I'm going to assume, in your CSS, that's meant to be vertical-align. If so, it's because vertical-align will only apply to table cells, not divs - that would explain why it is only being successfully applied to your tds.
Additionally, you shouldn't really put a div inside a table (and shouldn't put a td inside of that) but that's not related to your problem.
Assign one class for left alignment and other for center like so...
.left {
text-align:left;
}
.center {
text-align:center;
}
Asign class to TD elements
<tr class="mainInfo" id="header">
<td class='left'> Item </td>
<td class='center'> Color </td>
</tr>
Hi am trying to add a div above every <tr> but when i look at the html console the div are showing outside the table. below is the html code.
<table>
<div>
<tr><td></td></tr>
</div>
<div>
<tr><td></td></tr>
</div>
</table>
Is this not allowed? any help would be great.
<div> tag can not be used above <tr> tag. Instead you can use <tbody> tag to do your work. If you are planning to give id attribute to <div> tag and doing some processing, same purpose you can achieve through <tbody> tag. <div> and <table> are both block level elements. so they can not be nested.
For further information visit this page
For example:
<table>
<tbody class="green">
<tr>
<td>Data</td>
</tr>
</tbody>
<tbody class="blue">
<tr>
<td>Data</td>
</tr>
</tbody>
</table>
secondly, you can put "div" tag inside "td" tag.
<table>
<tr>
<td>
<div></div>
</td>
</tr>
</table>
Further questions are always welcome.
You can't put a div directly inside a table but you can put div inside td or th element.
For that you need to do is make sure the div is inside an actual table cell, a td or th element, so do that:
HTML:-
<tr>
<td>
<div>
<p>I'm text in a div.</p>
</div>
</td>
</tr>
For more information :-
http://css-tricks.com/using-divs-inside-tables/
No, you cannot insert a div directly inside of a table. It is not correct html, and will result in unexpected output.
I would be happy to be more insightful, but you haven't said what you are attempting, so I can't really offer an alternative.
You can not use tag to make group of more than one tag. If you want to make group of tag for any purpose like in ajax to change particular group or in CSS to change style of particular tag etc. then use
Ex.
<table>
<tbody id="foods">
<tr>
<td>Group 1</td>
</tr>
<tr>
<td>Group 1</td>
</tr>
</tbody>
<tbody id="drinks">
<tr>
<td>Group 2</td>
</tr>
<tr>
<td>Group 2</td>
</tr>
</tbody>
</table>
In the html tables, <table> tag expect <tr> tag right after itself and <tr> tag expect <td> tag right after itself. So if you want to put a div in table, you can put it in between <td> and </td> tags as data.
<table>
<tr>
<td>
<div>
<p>It works well</p>
</div>
</td>
</tr>
<table>
If we follow the w3 org table reference ,and follow the Permitted Contents section, we can see that the table tags takes tbody(optional) and tr as the only permitted contents.
So i reckon it is safe to say we cannot add a div tag which is a flow content as a direct child of the table which i understand is what you meant when you had said above a tr.
Having said that , as we follow the above link , you will find that it is safe to use divs inside the td element as seen here
A div cannot be added inside tr but there's an alternate solution here.
I tried adding a div inside tr but it seems a td should be the immediate child of a tr for it to work properly.
Adding a div inside td works fine.
I suppose you are trying to add some background or border-radius for the whole tr. Here's how I achieved the similar result in my project.
I'm using colspan and flex property to achieve that.
.flex-container{
display: flex;
margin: 5px;
}
table{
border: 1px solid red;
}
tr{
border: 1px solid green;
padding: 5px;
}
.flex-container .col{
box-sizing: border-box;
border: 1px solid;
padding: 5px;
border-radius: 5px;
margin: 5px;
background: skyblue;
}
<table>
<tr>
<!-- Assuming you have 4 columns -->
<td colspan="4">
<div class="flex-container">
<div class="col"> Item 1 </div>
<div class="col"> Item 2 </div>
<div class="col"> Item 3 </div>
</div>
</td>
</tr>
</table>
The problem will happen whenever it will render on small device. Element <div> inside <td> will occurs in mobile responsive screen.
You could use display: table-row-group for your div.
<table>
<div style="display: table-row-group">
<tr><td></td></tr>
</div>
<div style="display: table-row-group">
<tr><td></td></tr>
</div>
</table>
I am producing a personalised HTML email which has already been designed. I have coded the email with all the content placed within a table. I need to place text in three different areas in one row in a kind of scattered way. I tried placing the text into a div within the table row and styling it using inline CSS however, when i tested it on emailonacid (email testing website) it doesn't display correctly on the different email programs. Is there a way i can do this so that it works for all email programs?
I would like to position the text like so:
http://i754.photobucket.com/albums/xx182/rache_R/image_zps0604dece.jpg
The black boxes is where the images are.
<tr>
<td>
<div id="cambelts" style="margin-top: -30px;text-transform: uppercase; position: relative; top: 80px; left: 170px;">This is text 1
<br/>
<span style="font-weight: bold;">£#XX.XX#</span></div>
<img src="images/Untitled-1_04.jpg" width="800" height="418" alt="">
<div id="Accessory_Belt_kits" style="text-transform: uppercase; position: relative; top: -235px; left: 20px;">This is text 2
<br/>
<span style="font-weight: bold;">£#XX.XX#</span></div>
<div id="Water_Pumps" style="text-transform: uppercase; float: right; position: relative; top: -80px; right: 40px;">This is text 3
<br/>
<span style="font-weight: bold;">£#XX.XX#</span></div>
</td>
</tr>
You should not concentrate with fancy CSS tricks in E-mail. Email should be more about content and less about CSS positioning and gimmicks.
Having said that Email clients do support certain CSS attributes.
Click here to check which attributes are supported by different Email clients.
Also here is a tool which can allow you to see how your email will be rendered in different E-mail clients.
So my advice is instead of trying to hack your way into getting your content displayed , focus more on what the end user will see rather than how he see's it.
Instead of using CSS, you can also add the another table in the row to adjust the text position. This way you can manage the text position easily.
Set the border of the table to zero (<table border="0">) to make it invisible if necessary.
I am fairly new to creating HTML emails but I have found that not all CSS code really works across all email clients so it is better to stick with as much HTML as possible.
One way you could accomplish this is a table with two columns. In the left column you have text 1 and 3 then in the right column you have text 2. In order to create the spacing, you will need to include empty "cells" that give the spacing.
<table width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="290">
<table align="center">
<tr>
<td>
<h1>Text 1</h1>
</td>
</tr>
<tr>
<td height="20">
</td>
</tr>
<tr>
<td>
<h1>Text 2</h1>
</td>
</tr>
</table>
</td>
<td width="20">
</td>
<td width="290">
<table align="center">
<tr>
<td height="20">
</td>
</tr>
<tr>
<td height="20">
<h1>Text 2</h1>
</td>
</tr>
<tr>
<td height="20">
</td>
</tr>
</table>
</td>
</tr>
</table>
This should give you a solid base to work with and all email clients will render tables properly.
I'm trying to get a resposive table with a % and not hard coded pixel values, but the column in which I want to place the image gets very small when I resize the window.
HTML:
<TABLE BORDER=1 style="width: 90%; margin: 5%;">
<TR>
<TD width="70%">
<h4>ABOUT US</h4>
<p spellcheck="false" style="padding: 15px;">content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
</p>
<p>content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p>
<br/><br/><br/><br/><br/>
</TD>
<TD width="30%" rowspan=2><img src="images/foto.jpeg"></TD>
</TR>
<TR>
<TD>
<h4>MEET THE TEAM</h4>
<p>content</p>
</TD>
</TABLE>
jsFiddle
Is there any way to do this so that the table resize in such manner that the column 2 becomes row 3? If I would have to do the same thing using divs I would by okay with that.
Here's a simple rule when it comes to responsive web design (or any web design in general)...
Never
Ever
Ever
... Use tables to define the layout of a page. Tables are designed to present tabular data not to define the layout of a page. Use div elements instead
A useful link to bear in mind is http://shouldiusetablesforlayout.com/.
Tables shouldn't be used for layout (as #davblayn pointed out), but if you want/need to use them:
HTML:
<TABLE BORDER=1 style="width: 90%; margin: 5%;">
<TR>
<TD id='firstItem' width="70%">
<h4>ABOUT US</h4>
<p spellcheck="false" style="padding: 15px;">content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
</p>
<p>content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p>
<br/><br/><br/><br/><br/>
</TD>
<TD width="30%" id='responsiveItem' rowspan=2><img src="images/foto.jpeg"></TD>
</TR>
<TR>
<TD>
<h4>MEET THE TEAM</h4>
<p>content</p>
</TD>
</TABLE>
CSS:
#media all and (max-width: 699px) and (min-width: 520px) {
td{
width:100%;
}
#firstItem{
display:block;
}
#responsiveItem{
float:left;
}
}
jsFiddle
Play with resizing the JSFiddle window, the column with the image drops down to become a row when there isn't enough room.
Don't use tables for layout. You can't easily do what you want with CSS anyway, since you'd have to override the display property for multiple elements.
If by "responsive" you mean does not go screwy when text does not fit, and maintains image size (images do not scale nicely), then you can use this:
<table border="1" width="800px" height="250" style="min-width:800px; width: 90%; margin: 5%;">
<tr>
<td>
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
</td>
<td style="height: 250px; width: 250px;" rowspan="2">CONTENT</td>
</tr>
<tr>
<td>
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
</td>
</tr>
</table>
Basically, you need to set minimum space to accomodate the content, then you can scale outwards as much as you want.
While yes, tables are generally frowned upon, it is another form of "WHY WOULD YOU WANT TO DO THAT" and since the question particularly asks for tables, there is no need to completely change the question to satisfy your pet peeve.
Tables work fine for websites, the main issue with them is that they take a while to set up, and once they are set up, they stay that way forever, and changing them is impossible without total re-tabling.
This does not appear to the main issue here.
I have this table, which is how it will look when a user posts. When a large amount of content is entered in the second td, the first td does what it should naturally do and center itself with the second one. Here is what it looks like:
http://puu.sh/YdaE
Is it possible to make it so the first td stays at the top and doesn't center itself with the second one? Because it looks kind of silly when it does...
Here is the basic jist the code:
<div id="feed">
<div class="post">
<table>
<tr>
<td><img src="images/profile-pic.jpg"></td>
<td>
<div class="name">Kevin Jones</div>
<div class="message">Hanging out with my girlfriend, etc.</div>
</td>
</tr>
</table>
</div>
</div>
Any help is appreciated, thanks.
Yes, with CSS.
vertical-align: top;
So you could just give a class to your first TD and apply the above-mentioned CSS.
I'm not sure I understood your question, but if you want to prevent the image on the first td to be vertically aligned just specify vertical alignment via HTML attribute as shown here:
<div id="feed">
<div class="post">
<table>
<tr>
<td valign="top"><img src="images/profile-pic.jpg"></td>
<td>
<div class="name">Kevin Jones</div>
<div class="message">Hanging out with my girlfriend, etc.</div>
</td>
</tr>
</table>
</div>
</div>
Add valign="top" attribute to the td tag