I have a table with one row and 2 columns. I have two menus that I would like to put in 1 column. One to the top and the second to the bottom. The valign doesn't work, I cant figure out how to make it work, the text in the second td can change so if it grows the second menu should be pushed to the bottom,
Please see my current code below:
<table>
<tr>
<td>
<table>
<tr>
<td valign="top">
<div class="left">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</td>
</tr>
<tr>
<td valign="bottom">
<div class="left">
<ul>
<li>four</li>
<li>five</li>
</ul>
</div>
</td>
</tr>
</table>
</td>
<td valign="bottom">
<div>
some text here
</div>
</td>
</tr>
There is nothing wrong with your code
try to add border="1" on all table tag. <table border ="1"> you'' figure it out
try to valign your last <div>
or colspan on your specified <td>
new updated with this code will makes:
<table border="1">
<tr>
<td>
<table border ="1">
<tr>
<td valign="top">
<div class="left">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</td>
</tr>
<tr>
<td valign="bottom">
<div class="left">
<ul>
<li>four</li>
<li>five</li>
</ul>
</div>
</td>
</tr>
</table>
</td>
<td valign="bottom" style="display:block; margin-left:auto; margin-right: auto;">
<div>
some text here some text here some text here some text here some text here some text here some text here some text here
</div>
</td>
</tr>
Related
I've tried to look at a few web pages but none of them seem to be addressing the specific issue I'm having. I'm trying to make a web page and I'm trying to make a table aligned to the left side of the web page with while the rest in center aligned. However the items ligned in the center are pushed over to the right where the left aligned table is. How can I align something in the center without it being interefered with something aligned on the left side of the page?
Here is my code.
`<!doctype html>
<title> Webpage.</title>
<body>
<body background="Data/Back.jpg">
<table style="float: left" bgcolor="#9999FF" border="solid">
<tr>
<th><ul><h1>Directory.</h1></ul></th></tr>
<br>
<tr><td><li><a href="subpages/skills.html">Skills.</li></td></tr>
<tr><td><li><a href="subpages/experience.html">Experience.</li></td>
</tr>
<tr><td><li><a href="subpages/References">References.</li></td></tr>
<tr><td><li><a href="subpages/ContactInfo.html">Contact Info.</li>
</td></tr>
<tr><td><li><a href="subpages/Resume.html">Resume.</li></td></tr>
</table>
<center>
<table bgcolor="CCCCCC" border="3px solid black">
<tr>
<th><h1><b><u>Name/Header.</u></b></h1></th>
</tr>
</table>
<img src="Data/Me.jpg" width="25%">
<table bgcolor="#819FF7" width="50%" border="solid">
<tr>
<th>About me.</th>
</tr>
<tr>
<td>Subject
</td>
</tr>
</center>
<style type="text/css">
h1{
color: #0404B4
}
th{
color: #61380B
}
td{
color: #8A0829
}
</style>
</body>`
Simply remove float: left from the first table. Floating an element means that other elements will attempt to occupy any remaining width when that element is less than 100% of the width of the parent. Alternatively, clear the floats afterwards with clear: both.
Here's an example, cleanly formatted, and removing float: left.
h1 {
color: #0404B4;
}
th {
color: #61380B;
}
td {
color: #8A0829;
}
<body>
<table bgcolor="#9999FF" border="solid">
<tr>
<th>
<div style="margin-left: 2em">
<h1>Directory.</h1>
</div>
</th>
</tr>
<tr>
<td>
<ul>
<li>
Skills.
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Experience.
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
References.
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Contact Info.
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Resume.
</li>
</ul>
</td>
</tr>
</table>
<center>
<table bgcolor="#CCCCCC" border="3px solid black">
<tr>
<th>
<h1><b><u>Name/Header.</u></b></h1>
</th>
</tr>
</table><img src="Data/Me.jpg" width="25%">
<table bgcolor="#819FF7" border="solid" width="50%">
<tr>
<th>About me.</th>
</tr>
<tr>
<td>Subject</td>
</tr>
</table>
</center>
</body>
Hope this helps! :)
My web page has a table and for one element i have to apply grid property of foundation. I have to divide the row into two columns having size 10 and 2. First column is an input field and second is a drop down icon, But when I try to do it 2nd column is going down after first column.
<table class="inner-table">
<tr>
<td width="20">plan </td>
<td width="50">Mobile</td>
<td width="15">20%</td>
<td width="15">50%</td>
</tr>
<tr>
<td>dsffgh</td>
<td>Mobile</td>
<td>20%</td>
<td>50%</td>
</tr>
<tr>
<td>Plan</td>
<td>
<div class="row">
<form class="project-name">
<div class="small-11 columns">
<input type="text" name="projectName">
</div>
<div class="small-1 columns">
<a href="#" data-dropdown="drop1"><img src="images/Rectangle-13.png" alt="dropdown-menu" height="10em" width="10em">
</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>10</li>
<li>15<li>
<li>20</li>
</ul>
</div>
</form>
</div>
</td>
</tr>
<tr>
<td id="dot-emp3" class="show-more">
...
</td>
</tr>
</table>
http://codepen.io/anon/pen/MaaOxG
I'm creating a website and I'm trying to create a.. well I don't know what it is called exactly but it basically includes a list, a button, an image, a title and some text.
All elements are in seperate tables.
What I'd like to do is get the title to be top with the image underneath that, the list to the RIGHT of both the image and the title, the text undereneath the list and the button to be at the center berlow everything.
<table border="1" width="350px" height="50px" class="title_table">
<tr>
<td align="center">
<multiline>Basic plan set-up</multiline>
</td>
</tr>
</table>
<table border="1" width="350px" height="125px" class="image_table">
<tr>
<td align="center">
<img editable="true" mc:edit="feature-img1" style="display: block;" width="102" height="100" src="http://promailthemes.com/campaigner/layout2/white/blue/img/feature-img1.png" alt="feature image1" class="feature-img" />
</td>
</tr>
</table>
<div class="list_table">
<table border="1" width="350px" height="300px">
<tr>
<td align="left">
<p>What's included:</p>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</td>
</tr>
</table>
</div>
<table border="1" width="350px" height="125px" class="button_table">
<tr>
<td align="center">
<input type="submit" value="To checkout!" class="submit">
</td>
</tr>
</table>
Is this what you're trying to achieve?
DEMO: JSFiddle
Code:
<table border="1" width="350px" height="50px" class="title_table">
<tr>
<td align="center">
<p>Basic plan set-up</p>
</td>
<td rowspan="2">
<p>What's included:</p>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</td>
</tr>
<tr>
<td align="center">
<img editable="true" mc:edit="feature-img1" style="display: block;" width="102" height="100" src="http://promailthemes.com/campaigner/layout2/white/blue/img/feature-img1.png" alt="feature image1" class="feature-img" />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="To checkout!" class="submit" />
</td>
</tr>
</table>
A few sidenotes:
Try to avoid using tables solely for the purpose of lay-out. Use div's and CSS instead, which is a much better solution.
Different tables for each section is overkill. If you insist on using tables, use only 1.
Separate your CSS and HTML if possible. Create a separate file for both, and link to the CSS from within the HTML page.
I am attempting to align two separate tables in html. I want them centered with one on the left, one on the right and some space between the tables. Here is the code I currently have set up. I have them aligned, but one is left and one is right with lots of space between them. New to Html please would be appreciated!
<h1>
Retrofit</h1>
<p>
Kendell Retrofit is the latest division to the Kendell divisions. Our Retrofit team includes customer service, outside sales, production and keying specialists. </p>
<div>
<table style="float:left">
</table>
<table align="left" border="0" cellpadding="0" cellspacing="2" style="width: 150px;">
<thead>
<tr>
<th scope="col" style="text-align: left;">
Markets:<br />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
<li>
Commercial</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Financial</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Global</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Government</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Healthcare</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Higher Education</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
K-12 Education</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Retail</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table style="float:right">
</table>
<table align="right" border="0" cellpadding="0" cellspacing="2" style="width: 150px;">
<thead>
<tr>
<th scope="col" style="text-align: left;">
<p>
Brands:</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
<li>
Arrow</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Best</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Corbin Russwin</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Dorma</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Falcon</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Kwikset</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Sargent</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Schlage</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Stanley</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Weiser</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Yale</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<hr />
<p>
</p>
Basic nested table will do it.
<table width="600px" >
<tr>
<td style="width: 50%;" >
<table width="100%" >
<tr>
<td>
content of left side
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 50%;" >
<table width="100%" >
<tr>
<td>
content of right side
</td>
</tr>
</table>
</td>
</tr>
</table>
Check it here
Note: margin: 0 auto; makes your table at the center
Instead of using float left/right use inline-table as shown below:
table
{
display:inline-table;
}
This way you can have tables side by side.
If you change the value of "style="width: 150px" by one more high (200px or 250px), does it work ?
You only need to float the first table. Then you simply add margin-right: 50px; (for example) to it and the second one will be next to it, 50px away. If you want to center them both, put them in a div with some width and add margin: 0 auto;. Here is a jsbin example.
P.S.: Press edit in top-right corner to see the code. The good thing about using this float to the first table, with 2 seperate tables and with margin: 0 auto; to the parent div is that it is responsive. Try resizing the browser window and you will see how the tables seperate on smaller resolutions (good for a website that is designed to run on smartphones too)
They are misaligned because you have Markets:<br /> in first table and <p>Brands:</p> in second table. You need to be consistent with them.
You can use float:left; and margin-right on the first div to get the spacing.
JSBin sample (Seems like Fiddle is down)
See this DEMO
You can try on the second table :
<table style="float:left">
and replace on the second table :
align="right"
with
align="left"
I just want to order some li tags the same way I would do with this code
<table>
<tr>
<td colspan='2' rowspan='2'>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
For JQuery script reason, I can't use a table, only a list, but I want to display it just like it would have been with a table.
So, I don't know which of theses properties I have to use:
Inline-block,
Block,
Inline
As the comments mention: display: table-cell is the key. The layout you asked for should look something like
<ul style="display: table;">
<li style="display: table-row;">
<ul>
<li style="display: table-cell;"></li>
...
</ul>
</li>
...
</ul>