I can't get my two tables to align next to each other. The second blue box (of smaller boxes) keeps sitting below the first box. I've tried using "display: inline-block" and "float: left" on every single element, but nothing happens. Please help?
#zero-data {
border: 1px solid black;
height: 200px;
width: 200px;
text-align: center;
}
#table-12 tr {
display: inline-block;
}
.data-1234 {
border: 1px solid blue;
width: 95px;
height: 95px;
text-align: center;
}
#table-34 tr {
display: inline-block;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Problem.css">
</head>
<body>
<!-- big table -->
<table id="zero-table">
<tr id="zero-row">
<td id="zero-data">0</td>
</tr>
</table>
<!-- tables 1 & 2 -->
<table id="table-12">
<tr id="row-1">
<td class="data-1234">1</td>
</tr>
<tr id="row-2">
<td class="data-1234">2</td>
</tr>
</table>
<!-- tables 3 & 4 -->
<table id="table-34">
<tr id="row-3">
<td class="data-1234">3</td>
</tr>
<tr id="row-4">
<td class="data-1234">4</td>
</tr>
</table>
</body>
</html>
Like this?
.wrapper {
background-color: red;
}
#zero-table,
#table-12,
#table-34 {
float: left;
}
#zero-data {
border: 1px solid black;
height: 200px;
width: 200px;
text-align: center;
}
.data-1234 {
border: 1px solid blue;
width: 95px;
height: 95px;
text-align: center;
}
<div class="wrapper">
<table id="zero-table">
<tr id="zero-row">
<td id="zero-data">0</td>
</tr>
</table>
<table id="table-12">
<tr id="row-1">
<td class="data-1234">1</td>
</tr>
<tr id="row-2">
<td class="data-1234">2</td>
</tr>
</table>
<table id="table-34">
<tr id="row-3">
<td class="data-1234">3</td>
</tr>
<tr id="row-4">
<td class="data-1234">4</td>
</tr>
</table>
</div>
Give ghost columns a try. Place it between each of the tables.
<!-- your table -->
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="150" align="left" valign="top">
<![endif]-->
<!-- your table -->
Once you place it in the tables should start aligning properly. Change the width of the TD to whatever it's supposed to be in your code. Let me know you go.
No need to add Float to every element. Since you want the second and third tables to appear beside the first table, you just add Float to that first table:
#zero-table { float: left; }
See JSFiddle
Related
I would like to create some text like this.
I used this code, but it didn't work:
woman <span style="padding-left:40px"> TextTextTextText</span> <br>
Man <span style="padding-left:40px"> TextTextTextText</span>
What should I use instead?
<style>
table {
border: 0;
border-collapse: collapse;
}
.pl-40 {
padding-left: 40px;
}
</style>
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td>Woman</td>
<td class="pl-40">TextTextTextText</td>
</tr>
<tr>
<td>Man</td>
<td class="pl-40">TextTextTextText</td>
</tr>
</table>
</body>
</html>
You might want to use a table:
.left {
text-align: left;
}
.right {
text-align: right;
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table>
<tbody>
<tr>
<td class="left">Woman</td>
<td class="right">TextTextTextTop</td>
</tr>
<tr>
<td class="left">Man</td>
<td class="right">TextTextTextBottom</td>
</tr>
</tbody>
</table>
</body>
</html>
If you want some more space between them, then you can add padding-right: 40px; to the .left declaration in the CSS:
.left {
text-align: left;
padding-right: 40px;
}
As Prem Signh said in his answer, you can hide the border with <table style="border: 0; border-collapse: collapse;"> instead of <table>.
Try using something like this:
.left {
display: inline-block;
width: 50px;
}
.right {
padding-left: 40px;
}
<div>
<span class="left">woman</span>
<span class="right">TextTextTextText</span>
</div>
<div>
<span class="left">Man</span>
<span class="right">TextTextTextText</span>
</div>
I am trying to create a profile box where the user would be able to see his own profile picture, and other account specific information and utilities, like their username, settings button, profile page button, etc. The way I went about doing this was with a table element centered using flex. Then, I colored the backgrounds of my divs to see what they are doing. I noticed white lines between the cells of my table, tried some things, did some research, found the border-collapse attribute, and used it. Problem is, only some of my lines went away, as shown in the picture below. Weirder enough, it seems to disappear when I zoom in and out using ctrl + scroll. My guess is that it's some sort of rounding error.
What to do?
.Leftside2 {
flex: 20%;
background-color: red;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.profile {
width: 90%;
border: 2px solid black;
display: flex;
justify-content: center;
border-collapse: collapse;
}
#profile_picture {
height: 100%;
padding: 5px;
background-color: orange;
display: flex;
justify-content: center;
}
#profile_picture img {
width: 80%;
height: 80%;
}
.friend_list {
width: 90%;
}
<div class="Leftside2">
<table class="profile">
<tr>
<td style="height: 30vh;border-width: 0px">
<div id="profile_picture"><img src="https://via.placeholder.com/450x400"></div>
</td>
</tr>
<tr>
<td style="border: 0 solid black; background-color: orange">Jill</td>
</tr>
<tr>
<td style="border-width: 0px">Eve</td>
</tr>
<tr>
<td style="border-width: 0px">John</td>
</tr>
</table>
<table class="friend_list">
<tr>
<td>Friends List</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
</div>
Edit: I tried putting cellpadding="0" and cellspacing="0" inside my and it didn't work. I also tried to explicitly state that margin = 0, padding = 0 in all table elements. I do not think that it's a margin/padding issue, as many have suggested below.
Edited code:
.profile {
width: 90%;
border: 2px solid black;
display: flex;
justify-content: center;
border-collapse: collapse;
padding: 0;
margin: 0;
}
.profile td {
padding: 0;
margin: 0;
}
Second edit:
<html lang = "en">
<head>
<link rel="stylesheet" href="../css/style.css">
<title>Find a Friend</title>
</head>
<body>
<div class="HeaderMenu">
<div style="margin-left:40px;margin-right:100px;background-color: #008aed;">
<button class="logout_button">Logout</button>
</div>
</div>
<div class="row">
<div class = "left_space"></div>
<div class="Leftside2">
<table class="profile" cellpadding="0" cellspacing="0">
<tr>
<td style="height: 30vh;border-width: 0px">
<div id="profile_picture"><img src="../img/placeholder.png"></div>
</td>
</tr>
<tr>
<td style="border: 0 solid black; background-color: orange">Jill</td>
</tr>
<tr>
<td style="border-width: 0px">Eve</td>
</tr>
<tr>
<td style="border-width: 0px">John</td>
</tr>
</table>
<table class="friend_list">
<tr>
<td>Friends List</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
</div>
<div class="Centerside2">
</div>
<div class="Rightside2">
</div>
<div class = "right_space"></div>
</div>
</body>
.profile td {
padding: 0;
}
adding this to your css should solve the problem. or you can add cellpadding="0" in your html table tag.
just adding attribute cellpadding="0" in your table tag will fix your issue.
Try adding this to your table tag:
cellspacing=“0”
Padding refers to the space inside the cell. Cell spacing is about how much space there is outside it.
I am a beginner with HTML and I am trying to make a table layout. So far I have done the table rows, height, data etc. What I cant figure out is something like the six squares up on top (home, about me, product etc.) from the pictures. Any help would be appreciated.
Here is the code I have so far:
<!DOCTYPE HTML>
<html>
<head>
<title>WEB PAGE TITLE GOES HERE</title>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0">
<tr>
<!-- ============ HEADER SECTION ============== -->
<td colspan="3" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr>
<tr>
<!-- ============ LEFT COLUMN (MENU) ============== -->
<td width="20%" valign="top" bgcolor="#999f8e">
Menu link<br>
Menu link<br>
Menu link<br>
Menu link<br>
Menu link
</td>
<!-- ============ MIDDLE COLUMN (CONTENT) ============== -->
<td width="55%" valign="top" bgcolor="#d2d8c7">
</td>
<td width="25%" valign="top" bgcolor="#999f8e"> </td>
</tr>
<!-- ============ FOOTER SECTION ============== -->
<tr><td colspan="3" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr>
</table>
</body>
<html>
Welcome to Stack.
First of all, I STRONGLY advice you to waste some time and learn Bootstrap, table layouts are old fashionend and they're hard to apply maintenance.
table .menu div{
background: yellow;
color: blue;
display: block;
float: left;
width: 14.66666666666667%;
margin: 1%;
padding: 1px;
border: solid 4px blue;
box-sizing: border-box;
text-align: center;
}
I've developed this Code Pen showing how to create that kind of floating elements that you're seeking, but I've used some css styles (and I advice you to learn it too, It's extremely important nowadays).
Call me inbox if you want some tips or links to study :)
This will do the trick for the menu nav in a flexible layout.
HTML File:
<!DOCTYPE html>
<html>
<head>
<title>Menu Demo</title>
<link rel="Stylesheet" href="style.css">
</head>
<body>
<div id="container">
<nav>
<span class=menu_item>Home</span>
<span class=menu_item>About me</span>
<span class=menu_item>Product</span>
<span class=menu_item>Services</span>
<span class=menu_item>Maps</span>
<span class=menu_item>Contact me</span>
</nav>
</div>
</body>
</html>
CSS File:
body
{
font-size: 100%;
padding: 0;
border: 0;
margin: 0;
}
nav
{
display: flex;
width: 100%;
flex-flow: row nowrap;
justify-content: space-around;
background-color: cyan;
padding: 0 10px 30px 0;
}
.menu_item
{
font-size: 1em;
border: 3px solid blue;
color: blue;
margin: 3px;
min-height: 2.5em;
width: 14%;
text-align: center;
text-decoration: underline;
background-color: yellow;
}
#container
{
}
~Pat
This is how you would literally do what you are trying to accomplish (creating a tabular format of your website). I'd recommend you spend some time learning bootstrap though and building a proper navbar and a responsive webpage. It will serve you better than working on html tables.
<table class="table table-hover">
<thead>
<tr>
<td>Home</td>
<td>About Me</td>
<td>Product</td>
<td>Services</td>
<td>Maps</td>
<td>Contact Me</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">This area will contain the Local Navigation</td>
<td colspan="2">This area will contain information about me</td>
<td colspan="2">This area will contain statistics of customer satisfaction</td>
</tr>
</tbody>
</table>
I'm trying to use HTML to construct a table with three rows (1-3) and three columns (A-C) forming nine "virtual cells" (A1, B1, C1, A2, B2, C2, A3, B3, C3) and apply row spanning so that:
cell A1 span all three rows (covering A2 and A3)
cell C1 span two rows (covering C2)
cell B2 span two rows (covering B3)
This is what I want to see:
This is the HTML I thought would give me that:
<html>
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 1em; vertical-align: top; }
</style>
</head>
<body>
<table>
<tr><td rowspan="3">A1</td><td>B1</td><td rowspan="2">C1</td></tr>
<tr><td rowspan="2">B2</td></tr>
<tr><td>C3</td></tr>
</table>
</body>
</html>
But that gives me:
What is the correct way to get what I want? Or is it not possible?
This is for use in technical documentation. It is not a layout issue, the content is semantically a table.
In order to prevent the rows collapsing without the need for additional markup, you can attach a phantom cell to each row with tr::after set to display: table-cell with your cell padding on top and bottom and a unicode blank space:
tr::after {
content: '\00a0';
display: table-cell;
padding: 1em 0;
}
Gives you the correct result:
It's worth noting that the phantom cell will create a slight gap to the right like this:
Full snippet
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 1em;
vertical-align: top;
}
tr:after {
content: '\00a0';
display: table-cell;
padding: 1em 0;
}
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2">B2</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>
Here's a solution without having to know the table height up front, using hidden table cells, like in Align table using rowspan and colspan (as I said, it's basically a duplicate, just another layout):
<html>
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 1em; vertical-align: top; }
td.hidden { visibility: hidden; padding: 1em 0; border: 0 none; }
</style>
</head>
<body>
<table>
<tr><td rowspan="3">A1</td><td>B1</td><td rowspan="2">C1</td><td class="hidden"></td></tr>
<tr><td rowspan="2">B2</td><td class="hidden"></td></tr>
<tr><td>C3</td><td class="hidden"></td></tr>
</table>
</body>
</html>
Why not just setting a height to the tr cause it is a table the height will adjust anyways if there is more content inside the row.
something like so:
table {
border-collapse: collapse;
}
tr {
height: 30px;
}
td {
border: 1px solid black;
padding: 1em;
vertical-align: top;
}
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2">B2</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>
Otherwise,
<!DOCTYPE html>
<html>
<head>
<style>
table { border-collapse: collapse; }
td{border: 1px solid black; padding: 1em; vertical-align: top; }
</style>
</head>
<body>
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2">B2</td>
</tr>
<tr>
<td rowspan="2">C3</td>
</tr>
</table>
</body>
</html>
You could hack it like this:
<html>
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 1em; vertical-align: top; }
</style>
</head>
<body>
<table>
<tr>
<td style="width:0px;padding:0;border:0"></td>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td style="width:0px;padding:0;border:0;height:50px"></td>
<td rowspan="2">B2</td>
</tr>
<tr>
<td style="width:0px;padding:0;border:0"></td>
<td>C3</td>
</tr>
</table>
</body>
</html>
... but I would recommend to use another structure instead of tables, since it doesn't have a lot in common with table, besides the columns.
It's depend the height of your table.
http://codepen.io/anon/pen/jBOgpx
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2" style="height:65px">B2</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>
This question already has answers here:
HTML -- two tables side by side [duplicate]
(4 answers)
Closed 6 years ago.
This is how the display currently looks:
This is how I want it to look:
.d1{
background:#F0F0F0;
border: 1px solid #A4A4A4;
}
#designs input, #itemz input{
height:19px;
font-size: 15px;
}
#designs #fds_image {
background-size: 190px 221px;
height: 221px;
width: 190px;
overflow:hidden;
}
#designs #fds_image img{
width: 190px;
}
<table id="designs" width="auto" align="center" border="0" bgcolor="#EBEBEB" cellspacing="5">
<tbody>
<tr>
<td class="d1" name="item">
<div id="fds_image">
<button class="preview_switch">M</button>
</div>
<hr>
<div class="bottom_bar">
<button name="preview" data-original="m">Preview</button>
<br>
<tbody>
<td class="d1" name="item">
<div id="fds_image">
<button class="preview_switch">M</button>
</div>
</div>
<hr>
<div class="bottom_bar">
<button name="preview" data-original="m">Preview</button>
I tried to do many things and researched online, but for some reason, it is not working. How can I make the tables display side-by-side, like I've shown?
You can override the default display: table to inline-table.
table {
display: inline-table;
}
Example of horizontally align multiple <table> elements.
body {
text-align: center;
}
table {
width: 100px;
height: 200px;
border-collapse: collapse;
display: inline-table;
}
td {
border: 1px solid grey;
}
tr:first-child {
height: 100%;
}
<table>
<tbody>
<tr>
<td>Content</td>
</tr>
<tr>
<td><button>Button</button></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Content</td>
</tr>
<tr>
<td><button>Button</button></td>
</tr>
</tbody>
</table>
You could try floating the tables.
table {
float: left;
}
You can make a bigger table that holds both of your tables currently side by side.
<table style="margin: auto;">
<tbody>
<tr>
<td><!-- Your first table --></td>
<td><!-- Your second table --></td>
</tr>
</tbody>
</table>