I want the <img> and Test to be aligned left, but they aren't.
My code:
<center>
<div class="body" id="block">
<span style="width:95%;background-color: rgb(247,247,247);border-radius:10px;display:block;">
<table>
<tr style="height:25px;">
<td style="width:70%;margin-left:10px;font-size:20px;text-align:left;display:block;">
<img style="height:20px;" src="http://i64.tinypic.com/2i9qzj5.png">
Test
</td>
<td style="font-size:12px;">
Another test
</td>
<td style="width:5%;">
</td>
<td style="width:15%;font-size:12px;">
Third test
</td>
</tr>
</table>
</span>
</div>
</center>
I've tried several things, but still does not work.
I don't understand what I'm doing wrong here.
Remove CSS display:block of <td> tag:
<td style="width:70%;margin-left:10px;font-size:20px;text-align:left;display:block;">
New code:
<td style="width:70%;margin-left:10px;font-size:20px;text-align:left;">
By default, <td> in table has CSS: display: table-cell;
True answer:
table { width: 100%; }
It's still messed up, but i don't clean the code.
<center>
<div class="body" id="block">
<div style="width:95%;background-color: rgb(247,247,247);border-radius:10px;">
<table style="width: 100%">
<tr style="height:25px;">
<td style="width:70%;padding-left: 10px;font-size:20px;text-align:left;">
<img style="height:20px;" src="http://i64.tinypic.com/2i9qzj5.png">
Test
</td>
<td style="font-size:12px;">
Another test
</td>
<td style="width:5%;">
</td>
<td style="width:15%;font-size:12px;">
Third test
</td>
</tr>
</table>
</div>
</div>
</center>
Hey this is my first post, but I hope I can help you with my answer. I pulled out the css from your html and also switched to div's, something I would recommend you do.
HTML:
<center>
<div class="body" id="block">
<div class="user item">
<img src="http://i64.tinypic.com/2i9qzj5.png">
Test
</div>
<div class="title item">
Another Test
</div>
<div class="third item">
Third test
</div>
</div>
</center>
CSS:
.body {
width:100%;
height:25px;
background-color: rgb(247,247,247);
border-radius:10px;
display:block;
}
.item {
width:20%;
display:inline-block;
}
.user {
float:left;
font-size:20px;
}
.user img {
height:20px;
}
.title {
font-size:12px;
}
.third {
}
.td4 {
font-size:12px;
}
JSFiddle
Related
I need to have some text next to an image on an HTML page. So I figured a table was the best way to go...
<table width="500px" >
<tbody>
<tr>
<td align="left">
<p>
<b>Isn't she hot??</b>
</p>
</td>
<td align="right">
<img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/>
</td>
</tr>
</tbody>
Fiddle https://jsfiddle.net/abuMariam/rsnc9vjp/
Problem is what if I want to move that text all the way up or all the way down. I can't because the image width makes both td elements to be wide so I have no way to vertically position the text within its td.
Can I still keep the table but still move the text up and down in its cell?
Yes, just use vertical-align="top" or vertical-align="bottom" on the td. Do you really need to use a table for this though? Tables should seldom be used nowadays, and only for tabular data.
<table width="500px" >
<tbody>
<tr>
<td align="left" style="vertical-align:top;">
<p>
<b>Isn't she hot??</b>
</p>
</td>
<td align="right">
<img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/>
</td>
</tr>
</tbody>
</table>
Here's one way you could do it without using a table, this method causes the divs to act like table cells:
.container {
width:500px;
display:table;
}
.container > div {
width:50%;
display:table-cell;
}
.container > div p {
margin:0;
}
.container .left {
vertical-align:top;
}
.container .right {
text-align:right;
}
<div class="container">
<div class="left">
<p>
<b>Isn't she hot??</b>
</p>
</div>
<div class="right">
<img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/>
</div>
</div>
I have a table of items that look like this
As you can see, the table does not take up the entire width of the screen(the width of that image is the width of the screen, this app is being designed for mobile devices)
The HTML that is generated to display this looks like this:
<table>
<tbody>
<tr>
<td>
<span style="display: table; min-width: 320px; max-width: 640px; border-top: 1px solid #f6f6f6; width: 100%;">
<div style="display: table-row;">
<div style="display: table-row; float: left;">
<div><b>R8,383.00</b></div>
<div>
<img style="float: left;" src="../resources/img/icon_circle_footer.png" width="20px" height="20px">
Emirates
</div>
</div>
<div style="display: table-row; float: left;">
<div>
<div>
<span><b>13:30</b></span> - 07:00
</div>
<div style="display: table-row;">18h 30m, 1-stop</div>
</div>
<div>
<div>
<span><b>14:25</b></span> - 16:25
</div>
<div style="display: table-row;">25h 0m, 1-stop</div>
</div>
</div>
<div style="display: table-row; float: right;">
<img style="float: right;" src="../resources/img/icon_circle_footer.png" width="20px" height="20px">
</div>
</div>
</span>
</td>
</tr>
</tbody>
</table>
I didn't bother including the styles that colors the fonts. The only reason that the image is even that wide, is because I set a minimum width of 320px, and then made the last image float right.
Setting min-width to 100% does not work. I'm at my wits end here, and I would really appreciate some help if anyone can lend it.
What you want is width='100%' inline style. DEMO
100 % width table:
<table bgcolor='red' width='100%'>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
</table>
Fiddle DEMO: http://jsfiddle.net/xeemez/WJJBX/
Alternatively you can use CSS instead of inline tags like this:
table{
background:red;
width:100%; }
DEMO
if you have a try give <table width="100%"></table>
OR
you make class table{width:100%;} both of work
HTML
<table width="100%">
<tbody>
<tr>
<td>
<span style="display: table; min-width: 320px; max-width: 640px; border-top: 1px solid #f6f6f6; width: 100%;">
<div style="display: table-row;">
<div style="display: table-row; float: left;">
<div><b>R8,383.00</b></div>
<div>
<img style="float: left;" src="../resources/img/icon_circle_footer.png" width="20px" height="20px">
Emirates
</div>
</div>
<div style="display: table-row; float: left;">
<div>
<div>
<span><b>13:30</b></span> - 07:00
</div>
<div style="display: table-row;">18h 30m, 1-stop</div>
</div>
<div>
<div>
<span><b>14:25</b></span> - 16:25
</div>
<div style="display: table-row;">25h 0m, 1-stop</div>
</div>
</div>
<div style="display: table-row; float: right;">
<img style="float: right;" src="../resources/img/icon_circle_footer.png" width="20px" height="20px">
</div>
</div>
</span>
</td>
</tr>
</tbody>
</table>
DEMO2
CSS
table{
background-color:yellow;
width:100%;
}
If you don't set a specific width for your table it will only take the space necessary to show the content it holds. So use width: 100%.
You should add width="100%" for parent table.
<table width="100%">
Please use div's, not tables :)
DEMO
width:100%;
Have a good day! :D
UPDATE:
Why not use tables for layout in HTML?
Only in <table> you can define width. Td might work, but to make sure it works the same everywhere you have to make it to <table width="_of_your_desire">
the same goes with the height - only this time height can be defined only in <td>.
Luck
I have a table within a div using the span12 class from twitter bootstrap which is contained within a row class div all surrounded by a footer tag as follows:
<footer class="footer">
<div class="row">
<div class="span12">
<table>
<tr>
<td> <!-- Contact Us -->
<table>
<tr>
<td><b>Contact Us</b></td>
</tr>
<tr>
<td>Tel: 01234 567897</td>
</tr>
<tr>
<td>E-mail: info#email.com</td>
</tr>
</table>
</td>
<td> <!-- Useful Links -->
<table>
<tr>
<td><b>Useful Links</b></td>
</tr>
<tr>
<td>Contact Us</td>
</tr>
<tr>
<td>About Us</td>
</tr>
<tr>
<td>Copyright Information</td>
</tr>
<tr>
<td>Terms & Conditions</td>
</tr>
</table>
</td>
<td> <!-- Social -->
<table>
<tr>
<td><b>Connect With Us</b></td>
</tr>
<tr>
<td>Facebook</td>
</tr>
<tr>
<td>Twitter</td>
</tr>
<tr>
<td>Google Plus</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</footer>
I have the following CSS applied:
/* Table Style */
.footer table {
table-layout:fixed;
margin-right: auto;
margin-left: auto;
width: 100%
}
.footer td b {
vertical-align:top;
color: #ccc2a0;
}
.footer td {
vertical-align:top;
color: #a8a8a8;
}
I have tried to get the space between the left side of the footer and the first table data to be the same as the space between the right side of the footer and the last table data however it always has a bigger gap on the right side.
Can anyone see a problem with the CSS I am using?
Thanks
EDIT:
Here is the code for trying to achieve this using divs:
<footer class="footer">
<div class="row" style="background-color:red;">
<div class="span12" style="background-color:orange;">
<div class="span4" id="leftFooter">
</div>
<div class="span4" id="middleFooter">
</div>
<div class="span4" id="rightFooter">
</div>
</div>
</div>
</footer>
The CSS simply colours the boxes so I can see what is going on and adds some height to the divs.
The grey box is the footer div, the red box is the row and the orange box is the span12. The rest are the 3 content divs of span4. Not sure why they don't stay on the same row.
I changed some of it and stripped all styling out (sorry), but your spacing should be fixed horizontally. You can apply whatever else you want styling wise. Also, I got rid of all the embedded tables because it was so cumbersome...I can adjust the vertical spacing if you want, but I just threw this together to give you an idea for horizontal spacing.
http://jsfiddle.net/YYZwY/1/
HTML:
<footer class="footer">
<table>
<td>
<div id="ContactUS" class="information">Contact Us</div>
<div id="Telephone" class="information">Tel: 01234 567897 </div>
<div id="email" class="information">Email: info#email.com</div>
</td>
<td>
<div class="links">Useful Links</div>
<div class="links">Contact Us</div>
<div class="links">About Us</div>
<div class="links">Copyright Information</div>
<div class="links">Terms & Conditions</div>
</td>
<td>
<div class="connect"><b>Connect With Us</b></div>
<div class="connect">Facebook</div>
<div class="connect">Twitter</div>
<div class="connect">Google Plus</div>
</td>
</footer>
CSS:
.links {
padding-left: 10px;
padding-right: 10px;
position: relative;
}
.connect {
padding-left: 10px;
padding-right: 10px;
position: relative;
}
.information {
padding-right: 10px;
}
CSS:
.span12 {
text-align: center;
}
This solution works if we don't mind the text alignment.
Result [CodePen] : http://codepen.io/loxaxs/pen/kilLG
A different solution:
CSS:
.span12 {
padding-left: 15%;
}
Result [CodePen] : http://codepen.io/loxaxs/pen/izIHq
I read that each column of a table can be styled using <colgroup> and <col>. I tried the following, but the style speficication is not seeming to work. How can I fix it?
When I do this with width property, it works. Is there anything wrong with text-align property?
<html><body><table>
<colgroup>
<col style="text-align:right" />
<col style="text-align:center" />
<col style="text-align:left" />
</colgroup>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
</table></body></html>
The result is that each colum is left aligned by default, ignoring the specification made in colgroup.
I am using Chrome 17.
While support for colgroup and col seems to be spotty, I don't think one should throw out the baby with the bathwater. I think tables have their place, to display tabular data. Using divs to display tabular data borders on table-phobia in my opinion.
<html><body>
<style>
.left {text-align:left;}
.center {text-align:center;}
.right {text-align:right;}
</style>
<table>
<tr>
<td class="left">aaaaaaaaaaa</td>
<td class="center">bbbbbbbbbbb</td>
<td class="right">ccccccccccc</td>
</tr>
<tr>
<td class="left">aaa</td>
<td class="center">bbb</td>
<td class="right">ccc</td>
</tr>
</table>
</body></html>
If not in need of tables, here´s how I´d do it tableless, just in case:
HTML:
<div id="container">
<div class="left">left aligned text</div>
<div class="center">center aligned text</div>
<div class="right">right aligned text</div>
</div>
CSS:
.container {}
.left {
width:100px;
float:left;
text-align:left;
}
.center {
width:100px;
float:left;
text-align:center;
}
.right {
width:100px;
float:left;
text-align:right;
}
(and you could just unify all the common styles with commas and just separate the text-alignment)
Don't use tables, use divs. Obviously the following should be seperated out into classes and such, but it works.
<html><body>
<div style="display: table">
<div style="display: table-row">
<div style="display: table-cell;">aaaaaaaaaaa</div>
<div style="display: table-cell;">bbbbbbbbbbb</div>
<div style="display: table-cell;">ccccccccccc</div>
</div>
<div style="display: table-row">
<div style="display: table-cell; text-align:right;">aaa</div>
<div style="display: table-cell; text-align:center;">bbb</div>
<div style="display: table-cell; text-align:left;">ccc</div>
</div>
</div>
</body></html>
I want to create a table like this, but using div instead of table
<style type="text/css">
body{ font-family:"Segoe UI", "Tahoma" }
td {
padding:0px 5px 10px 5px;
}
.username {
white-space:nowrap;
vertical-align:top;
text-align:right;
width:auto;
color:DodgerBlue;
}
</style>
<table width="500px" >
<tr>
<td class="username">copperfield</td>
<td>How to create table by using div </td>
<td style="vertical-align:top">time </td>
</tr>
<tr>
<td class="username">copperfield</td>
<td>
How to create table by using div How to create table by sing div How to create table by to create table by using div <img src="images/thinking.gif"> </br>
</td>
<td style="vertical-align:top"> 8:00 </td>
</tr>
<tr>
<td class="username"> </td>
<td>
How to create table by using div</br>
</td>
<td style="vertical-align:top"> 8:00 </td>
</tr>
<tr>
<td class="username"> </td>
<td>
How to create table by using div</br>
</td>
<td style="vertical-align:top"> 8:00 </td>
</tr>
<tr>
<td class="username">michael</td> <td><img src="images/thinking.gif"> Gi ku </td>
<td style="vertical-align:top"> 8:00 </td>
</tr>
</table>
I try the following code but it is not successful
<style type="text/css">
body{
font-family:Segoe UI;
}
.all{
float:left;
display:block;
}
.chat{
width:700px;
float:left;
display:table-cell;
}
.us{
color:blue;
text-align:right;
float:left;
margin-right:10px;
}
.ct{
white-space:normal;
float:left;
margin-right:10px;
}
.t{
float:left;
width:auto
}
</style>
<div class="all">
<div class="chat">
<div class="us"> userna3 46346346me </div>
<div class="ct"> content </div >
<div class="t"> time </div>
</div>
<div class="chat">
<div class="us"> copperfield </div>
<div class="ct"> How to create table by using div How to create table by sing div How to create table by to create table by using div</div>
<div class="t"> 8:00 </div>
</div>
<div class="chat">
<div class="us"> copperfield </div>
<div class="ct"> How to create table by using div Ho </div>
<div class="t"> 8:00 </div>
</div>
</div>
This looks like what you want: http://jsfiddle.net/ttunW/. The key was using display:table; for .all, display:table-row;, for .chat, getting rid of the float:left properties on all the divs, and assigning display:table-cell; to the divs within .chat.
You can't have something floating in a float. It just doesn't work in some ugly browsers cough IE cough.
So change your all class in your css to look like this:
.all div {float:left;}
Then take away all the other floats from your classes. For the us, ct, and t just give them a set width inside of each chat div. Also change the div's inside of the chat div's to p tags.