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>
Related
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.
Current HTML:
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Desired:
Question:
How can I add borders and width to my current HTML with CSS as the desired outcome?
What I have tried
I have tried the following css:
table {
border: 1px solid black;
}
This just puts a border around the table. How can I add it same as desired too?
table {
border-collapse: collapse;
/* if you don't add this line you will see "double" borders */
border: 1px solid black;
width: 100vw;
}
th{
color: white;
background-color: blue;
}
td{
background-color: white;
width: 70%;
}
td, th {
border: 1px solid black;
}
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Heres, your snippet!
simply this:
table {
border-collapse: collapse; /* if you don't add this line you will see "double" borders */
border: 1px solid black;
}
table th,
table td {
text-align: left;
border: 1px solid black;
}
demo here https://jsfiddle.net/3hpks1mL/
hope it help you
section {
width:100wh;
}
table{
width:100%
}
<section class="Product-Info">
<table border="1">
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<td>Product Name:</td>
<td >Name</td>
</tr>
<tr>
<td > Product Description:</td>
<td >Description</td>
</tr>
</table>
</section>
Fairly easy, in your example you just have to apply the desired background colour to the table header cells (th), like so:
th {
background: darkblue;
color: white; /* Assuming you don't want black text on dark blue. */
}
For the standard border around the table cells to disappear you have to simply collapse the border on the main table element, like so:
table {
border-collapse: collapse;
}
With that set you can now apply any border styling you want to your table, in any thickness, colour and style you want.
I'd go with the following:
table, th, td {
border: 1px solid black;
}
.Product-Info > table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
}
.Product-Info tr > *:first-child {
background: blue;
color: white;
text-align: left;
}
.w-25 {
width: 25% !important;
max-width: 25% !important;
}
.text-center {
text-align: center !important;
}
<section class="Product-Info">
<table>
<colgroup>
<col class="w-25 blue">
<col class="">
</colgroup>
<tr>
<th colspan="2" class="text-center">Product Infromation</th>
</tr>
<tr>
<th class="text-left">Product Name:</th>
<td class="text-center">Name</td>
</tr>
<tr>
<th class="text-left">Product Description:</th>
<td class="text-center">Description</td>
</tr>
</table>
</section>
Extra information (The "copy-paste" snippet under #Random-COSMOS answer).
Table is block-level element
"A block-level element always starts on a new line and takes up the
full width available. https://www.w3schools.com/html/html_blocks.asp"
Set any width you want to the table (400px or 30%) ==> 100% in your case (100% of its parent).
<table style="width: 100%;">
To specify table borders in CSS, use the border property.
table, th, td {
border: 1px solid black;
}
Out of topic - Accessible tables
For Web Accessibility => Add relationship between header and data cells (scope="row" / scope="col").
Full article: https://www.w3.org/WAI/tutorials/tables/two-headers/
<table>
<tr>
<th scope="col" colspan="2">Product Infromation</th>
</tr>
<tr>
<th scope="row">Product Name:</th>
<td>Some Name</td>
</tr>
<tr>
<th scope="row">Product Description:</th>
<td>Some Description</td>
</tr>
</table>
I have to make a table like
and I have this code so far:
table, td, tr {
border: 1px solid black;
}
td {
width: 50px;
height: 50px;
}
td[rowspan="2"] {
height: 100px;
}
td[colspan="2"] {
width: 100px;
}
<div>
<table>
<tr>
<td>a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td rowspan="2">c</td>
<td colspan="2" rowspan="2">
<table>
<tr>
<td colspan="2" rowspan="2">d</td>
</tr>
<tr></tr>
</table>
</td>
</tr>
<tr></tr>
</table>
</div>
The validator is giving me
and I don't know how to fix them.
I need no errors from the validator, as
it has to be acceptable by specification.
rowspans and colspans are only used if a cell should span 2 other cells horizontally or vertically, which isn't the case in your example. They are not there to define width or height.
So delete those and use classes instead to define the properties you want:
Apart from that, delete those empty tr elements you have in there - they make no sense without tds in them. ALso the nested table with only one cell in it is rather strange (you could just fill that cell with content), but maybe there's a reason for that which you didn't tell us.
table, td, tr {
border: 1px solid black;
}
td {
width: 50px;
height: 50px;
}
td.b {
height: 100px;
}
td.a {
width: 100px;
}
<div>
<table>
<tr>
<td>a</td>
<td class="a">b</td>
</tr>
<tr>
<td class="b">c</td>
<td class="a b" >
<table>
<tr>
<td class="a b">d</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
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
Firstly, this is a duplicate question: Equal-height scaling cells in an html table
The user that asked the question above didn't get a solution for the same issue I'm having.
Within the JSFIDDLE you will notice a cell with a red background. This cell is the highest and I need all other cells to pick up the highest cell height and span to the corresponding cell height.
The solution cannot contain fixed heights as this must be dynamic
Here is a mock up of what I'm trying to achieve: http://jsfiddle.net/pAz6G/
Here is HTML:
<table class="left" cellspacing="0" borderspacing="0" >
<tr>
<td>
<h2>Very Servere</h2>
<p>50m from high water on East Coast, 100m from high water on West Coast. Characterised by:</p>
<ul>
<li>Heavy salt deposits</li>
<li>The almost constant smell of saly spray in the air.</li>
<li>Close to breaking stuff (typically starts 50-100 metres) such as is found on exposed coasts.</li>
</ul>
<p>This environment may be extended inland by revailing winds and local coniditions</p>
</td>
</tr>
</table>
<table cellspacing="0" borderspacing="0" class="right">
<tr>
<td class="section">
<span class="section-heading">Applications</span>
<table class="inner">
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
</table>
</td>
<td class="section">
<span class="section-heading">Applications</span>
<table class="inner">
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
</table>
</td>
<td class="section">
<span class="section-heading">Applications</span>
<table class="inner">
<tr>
<td>Roofing</td>
</tr>
<tr>
<td class="red">Rain washing plus manual washing every 3 months</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
</table>
</td>
</tr>
</table>
Here is CSS:
/* Column Styling */
.left {
float: left;
width: 350px;
}
.left td {
padding: 10px;
}
.right {
float: left;
width: 400px;
}
/*********************************************/
/* General Styling */
.no-padding {
padding: 0;
}
td {
background: grey;
color: white;
vertical-align: top;
}
p {
margin: 0;
}
.red {
background: red;
}
/*********************************************/
/* Section Styling */
.section {
border-left: 1px solid #fff;
}
.section-heading {
display: block;
padding: 10px;
}
/*********************************************/
/* Nested Tables */
.inner {
width: 100%;
}
.inner td {
border-top: 1px solid #fff;
padding: 10px;
}
/*********************************************/
Instead of using multiple tables, try using one table.
Keeping it simple :)