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! :)
Related
Trying to make a two column page so I can have two columns of information. I cannot get it to work though. I have a large table that takes up half the page and is pushed to the left, but I cannot get the other part to go on the right! It just goes underneath. Please if you know how tell me. I have to do this for a school project! Here is my code:
.body {
font-family: "Bookman Old Style";
background:url('https://i.gifer.com/7sav.gif');
color: white;
}
<!--backup background-color: #D10F0F;-->
.table {
background-color: #B6B6B6;
font-size: 17px;
border-color: white;
}
.header {
}
.rowone {
float: left;
width: 50%;
}
.rowtwo:after {
content: "";
display: table;
clear: both;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>My Typical Day</title>
</head>
<body class="body">
<div class="header">
<center>
<!--Header-->
<h1><u>My Typical Day</u></h1>
<h4><u>By: Taylor Sloan</u></h4>
</div>
<!--End Of Header-->
<center>
<!--Table Start (ROW 1)-->
<div class="rowone">
<table border="2" bordercolor="white" class="table">
<tr>
<td><strong>Hour</strong></td>
<td><strong>Class</strong></td>
<td><strong>Teacher</strong></td>
<td><strong>Image</strong></td>
</tr>
<tr>
<td>1</td>
<td>Spanish 2.5</td>
<td>Córdoba</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>2</td>
<td>Wood Technologies I</td>
<td>Cortez</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>3</td>
<td>Honors Geometry</td>
<td>Alexander</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>4</td>
<td>Honors Biology</td>
<td>Martens</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>5</td>
<td>Honors English Language Arts</td>
<td>McCrossen</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>6</td>
<td>Physical Education</td>
<td>Lowe</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>7</td>
<td>Web Design</td>
<td>Foster</td>
<td><!--TAKEN OUT--></td>
</tr>
<table>
</div>
<!--Table End-->
<!--ROW2 STARTS-->
<div class="rowtwo">
<h3>My Top Three Favorite Books and Why</h3>
<ol>
<li>The Dragon Inside Series</li>
</ol>
</div>
<h5><em>Email Me!</em></h5>
</div>
</center>
</body>
</html>
Can anyone tell me what to do to fix it and attach a working version? I'm also doing this in Notepad++, not sure if that makes a difference.
You just need to make sure that your element tags are closed in the correct places, CENTER, DIV and TABLE tags all needed to be closed correctly.
Also, the CENTER tag is now deprecated and it is recommended that you use CSS to center your elements, like text-align: center
body {
font-family: "Bookman Old Style";
background: url('https://i.gifer.com/7sav.gif');
color: white;
}
<!--backup background-color: #D10F0F;
-->.table {
background-color: #B6B6B6;
font-size: 17px;
border-color: white;
}
.header {}
.rowone {
float: left;
width: 50%;
}
.rowtwo:after {
content: "";
display: table;
clear: both;
float: right;
}
<div class="header">
<center>
<!--Header-->
<h1><u>My Typical Day</u></h1>
<h4><u>By: Taylor Sloan</u></h4>
</center>
</div>
<!--End Of Header-->
<center>
<!--Table Start (ROW 1)-->
<div class="rowone">
<table border="2" bordercolor="white" class="table">
<tr>
<td><strong>Hour</strong></td>
<td><strong>Class</strong></td>
<td><strong>Teacher</strong></td>
<td><strong>Image</strong></td>
</tr>
<tr>
<td>1</td>
<td>Spanish 2.5</td>
<td>Córdoba</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>2</td>
<td>Wood Technologies I</td>
<td>Cortez</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>3</td>
<td>Honors Geometry</td>
<td>Alexander</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>4</td>
<td>Honors Biology</td>
<td>Martens</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>5</td>
<td>Honors English Language Arts</td>
<td>McCrossen</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>6</td>
<td>Physical Education</td>
<td>Lowe</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>7</td>
<td>Web Design</td>
<td>Foster</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
</table>
</div>
<!--Table End-->
<!--ROW2 STARTS-->
<div class="rowtwo">
<h3>My Top Three Favorite Books and Why</h3>
<ol>
<li>The Dragon Inside Series</li>
</ol>
</div>
<div>
<h5><em>Email Me!</em></h5>
</div>
</center>
Div elements will display as "block" elements by default, which only allows one per line. The next block level element will appear below it.
Add this CSS rule to .rowone and .rowtwo: display: inline; or display: inline-block;
Edit: MichaelvE's answer is correct. Floating block level divs will allow two blocks to appear on the same line, much like an inline element. I missed the open tags when skimming over the code.
I have a table which contains data and I want the first footer item to be aligned left and the remaining ones to be aligned right.
Here is expected results:
table {
width: 100%
}
<table class="price-list">
<thead>
<tr>
<th>No</th>
<th>Nome</th>
<th>Quantidade</th>
<th>Preço</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1</td>
<td>text2</td>
<td>text3</td>
<td>text4</td>
</tr>
</tbody>
<tfoot class="footer">
<tr align="left">
<td id="cart_voucher" class=" cart_voucher">
<form action="http://localhost:8080/index.php?controller=order-opc" method="post" id="voucher">
<div class="form-group form-group-placeholder">
<input type="text" class="discount_name form-control" id="discount_name" name="discount_name" placeholder="Kod rabatowy" value="">
<i class="fa fa-angle-right discount_icon" aria-hidden="true"></i>
<input type="hidden" name="submitDiscount">
</div>
</form>
</td>
</tr>
<!-- end VOUCHER -->
<!-- Total products -->
<tr align="right">
<td>Total products </td>
<td id="total_product">500,00 zł</td>
</tr>
<tr align="right">
<td Total shipping (tax incl.):>
</td>
<td id="total_shipping" class="price-opc">12,00 zł</td>
</tr>
<tr align="right">
<td>Total (tax excl.):</td>
<td id="total_price_without_tax" class="price-opc">418,50 zł</td>
</tr>
<!-- end Total tax excl. -->
<!-- Total tax -->
<tr align="right">
<td>Total tax:</td>
<td>93,50 zł</td>
</tr>
<!-- end Total tax -->
<tr align="right">
<td>Total:</td>
<td>
<span>512,00 zł</span>
</td>
</tr>
</tfoot>
</table>
I used inline align="left" for first footer element and align="right"for the remaining ones. I get the following:
UPDATE more explanation
In a footer we have form input and other data , form input should be left and the remaining footer element should be right as image describe below
I tried using flex-box for each tr but nothing worked. Can someone please help me? I just want the first element in the footer to align left and the rest to align right. Thanks, any help or suggestions will be helpful. Ignore thead and tbody, just consider tfoot.
You can apply float attribute for which accept right or left velues
.container {
width: 100%;
height: 100px;
background-color: red;
}
.left {
float: left;
background-color: yellow;
}
.right {
float: right;
background-color: yellow;
}
<div class="container">
<div class="left">Left Child</div>
<div class="right">Right Child</div>
</div>
This is how the attribute is work
I want #idTable and #userTable to be beside each other and the button below #idTable. I have tried display: inline-block; but it didn't help. Also, I have tried to put the button after the div#userTable but that would make the button go down more every time that table gets populated with more data. I want the button to remain still on the left side. While the #userTable and its info on the right side of the first table.
HTML:
<input type="date" />
<input type="date" />
<br style="clear:both" />
<table border="1" id="idTable">
<tr>
<th><b>#</b>
</th>
<th><b>ID</b>
</th>
</tr>
<tr>
<td>// #'s here</td>
<td>// ID's here</td>
</tr>
</table>
<br style="clear:both" />
<button>Update</button>
<div id="userTable">
<table border="1">
<tr>
<td><b>ID</b>
</td>
<td>Name</td>
</tr>
<tr>
<td colspan="2">
<table border="1" style="width:100%">
<tr>
<td><b>ID</b></td>
<td><b>Name</b></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
CSS:
#idTable{
display:inline-block;
}
#userTable{
display:inline-block;
}
JSFiddle Link
You can put #idTable and the button into another div (e.g. #wrapper) and set its float property to left.
HTML:
<div id='wrapper'>
<table border="1" id="idTable">
<tr>
<th><b>#</b>
</th>
<th><b>ID</b>
</th>
</tr>
<tr>
<td>// #'s here</td>
<td>// ID's here</td>
</tr>
</table>
<button>Update</button>
</div>
CSS:
#wrapper {
float: left;
}
See http://jsfiddle.net/82zv67d7/7
As far I know the column widths are determined by the first row of the table. My problem is the first td in table has colspan set to '2'. Here is how my table looks like. Important thing is I can not change the HTML structure of table.
<table>
<tbody>
<tr>
<td colspan="2"><strong>Personal Details</strong></td>
</tr>
<tr>
<td>
<ul>
<li>Title: </li>
</ul>
</td>
<td>
test
</td>
</tr>
<tr>
<td colspan="2"><strong>Personal Details</strong></td>
</tr>
<tr>
<td>
<ul>
<li>Title: </li>
</ul>
</td>
<td>
test
</td>
</tr>
<tr>
<td colspan="2"><strong>Personal Details</strong></td>
</tr>
<tr>
<td>
<ul>
<li>Title: </li>
</ul>
</td>
<td>
test
</td>
</tr>
<tr>
<td>
<ul>
<li>Title: </li>
</ul>
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
CSS:
table {
table-layout: fixed;
width: 100%;
word-wrap: break-word;
}
What I need is to set the width of td which contain <ul> element to 30%. So td colspan = '2' becomes some kind of header and the td elements below are split 30/70.
$('strong').parents('tr').addClass('header_td'); // jquery line code...
table {
width: 100%;
word-wrap: break-word;
}
table {
width: 100%;
word-wrap: break-word;
border: 2px solid black;
}
table tr:not(.header_td){
background : red;
color:white;
}
table tr:not(.header_td) td:first-child{
max-width:30%;
width:30%;
background:green;
}
table tr:not(.header_td) td{
max-width:69%; // 69% just only beacause some extra padding by element it self doesn't make chage t your structure.
width:69%;
background:black;
}
.header_td{
background : grey;
}
<table>
<tbody>
<tr>
<td colspan="2"><strong>Personal Details</strong></td>
</tr>
<tr>
<td>
<ul>
<li>Title: </li>
</ul>
</td>
<td>
test
</td>
</tr>
<tr>
<td colspan="2"><strong>Personal Details</strong></td>
</tr>
<tr>
<td>
<ul>
<li>Title: </li>
</ul>
</td>
<td>
test
</td>
</tr>
<tr>
<td colspan="2"><strong>Personal Details</strong></td>
</tr>
<tr>
<td>
<ul>
<li>Title: </li>
</ul>
</td>
<td>
test
</td>
</tr>
<tr>
<td>
<ul>
<li>Title: </li>
</ul>
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
here i updated whole my answer with your new requirement please take a look here on it
Take out table-layout: fixed; and add td:first-child { width: 30% } to your css.
http://jsfiddle.net/louis_feat/gcgk9y7e/
You can achieve this by using some pseudo selectors, it won't work in IE 6, 7 and 8 though:
table {
table-layout: initial;
width: 100%;
word-wrap: break-word;
}
tr:not(:first-child) td{
width: 70%;
}
tr:not(:first-child) td:first-child {
width: 30%;
}
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"