I'm trying to put an HTML table on the right side of a canvas and for some reason, it has huge spaces between rows.
I've tried the solution here
and here but none of them solved the problem.
Here's my current code:
<html>
<body style="margin: 0px">
<div style="display: flex">
<canvas style="background-color: blue;"></canvas>
<table>
<tbody>
<tr>
<td>hi</td>
<td>l</td>
</tr>
<tr>
<td>lol</td>
</tr>
</table>
</div>
</body>
</html>
Solution 1 - Set align-items: flex-start in div because the default value is stretch
div {
display: flex;
align-items: flex-start;
}
canvas {
background-color: blue;
}
table {
border: 1px solid red;
}
<div>
<canvas></canvas>
<table>
<tbody>
<tr>
<td>hi</td>
<td>l</td>
</tr>
<tr>
<td>lol</td>
</tr>
</table>
</div>
Solution 2 - Set align-self: flex-start in table
div {
display: flex;
}
canvas {
background-color: blue;
}
table {
border: 1px solid red;
align-self: flex-start
}
<div>
<canvas></canvas>
<table>
<tbody>
<tr>
<td>hi</td>
<td>l</td>
</tr>
<tr>
<td>lol</td>
</tr>
</table>
</div>
Set the table height to min-content
<table style="height: min-content;"> ... </table>
<div style="display: flex">
<canvas style="background-color: blue;"></canvas>
<table style="height: min-content;">
<tbody>
<tr>
<td>hi</td>
<td>l</td>
</tr>
<tr>
<td>lol</td>
</tr>
</table>
</div>
Related
this the image I'm trying to recreate
I'm trying to place the two(2) stacked images right next to each other and also make the whole three(3) images to also align right next to the sidebar tables like in the above image, but each time I try it always goes below the sidebar table. I have tried using flexbox but it doesn't work maybe I don't know it very much. please if anyone can help. Thank you
<div class="table">
<table>
<tr>
<th class="cat">Categories</th>
</tr>
<tr>
<th>Electronics</th>
</tr>
<tr>
<th>Clothing</th>
</tr>
<tr>
<th>Music & Equipment</th>
</tr>
<tr>
<th>Footwear</th>
</tr>
<tr>
<th>Software Products</th>
</tr>
<tr>
<th>Computer Hardware</th>
</tr>
<tr>
<th>Mobile Phones</th>
</tr>
<tr>
<th>Laptops</th>
</tr>
<tr>
<th>Furniture</th>
</tr>
<tr>
<th>Beauty Products</th>
</tr>
<tr>
<th>Computer Accessories</th>
</tr>
</table>
</div>
<div class="holder">
<div class="lone-image"> </div>
<div class="stacked-image">
<div class="canon"></div>
<div class="dell"></div>
</div>
</div>
CSS Code
.table {
display: flex;
flex - flow: column;
border: 1px solid #999696;
width: 25%;
height: 60%;
box-sizing: border-box;
}
table, th, td{
border-bottom:1px solid black;
text-align: left;
padding: 10px;
}
.cat{
background-color:rgb(0, 0, 107);
color: white;
border-radius: 4px;
}
.holder{
display: flex;
justify-content: center;
align-items: center;
}
.lone-image{
background-image: url(xii.jpg);
background-size: cover;
width: 35%;
height: 410px;
}
.stacked-image{
display: flex;
flex-direction: column;
height: 400px;
width: 40%;
margin: 4px;
}
.canon{
background-size: cover;
background-image: url(canon.jpg);
width: 65%;
height: 400px;
margin-bottom: 4px;
}
.dell{
background-size: cover;
background-image: url(dell.jpg);
width: 65%;
height: 400px;
}
I came up with this.
You can play around with width's and other styling but this should give you the basic idea.
Also, using tables is a bad practice as they offer no responsiveness.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<table>
<tr>
<td>
<div id="1table">
<table border="1">
<tr>
<th class="cat">Categories</th>
</tr>
<tr>
<th>Electronics</th>
</tr>
<tr>
<th>Clothing</th>
</tr>
<tr>
<th>Music & Equipment</th>
</tr>
<tr>
<th>Footwear</th>
</tr>
<tr>
<th>Software Products</th>
</tr>
<tr>
<th>Computer Hardware</th>
</tr>
<tr>
<th>Mobile Phones</th>
</tr>
<tr>
<th>Laptops</th>
</tr>
<tr>
<th>Furniture</th>
</tr>
<tr>
<th>Beauty Products</th>
</tr>
<tr>
<th>Computer Accessories</th>
</tr>
</table>
</div>
</td>
<td>
<table>
<tr>
<td rowspan="2"><img src="https://i.imgur.com/JeXUv8x.png" style="height:290px"></td>
<td colspan="2"><img src="https://i.imgur.com/4girMKd.png" style="height:140px"></td>
</tr>
<tr>
<td><img src="https://i.imgur.com/4girMKd.png" style="height:140px"></td>
</tr>
<tr>
</tr>
</table>
</td>
</tr>
</table>
<div class="holder">
<div class="lone-image"> </div>
<div class="stacked-image">
<div class="canon"></div>
<div class="dell"></div>
</div>
</div>
</body>
</html>
Have a great day!
I think their was some error in your width & height selection for each div. I changed that and removed a little bit of extra flex properties and thats it Just tell me you want something like this.
Proposed code
.container{
display:flex;
width:100%;
height:60%;
}
.table{
display: flex;
flex-flow: column;
border: 1px solid #999696;
width: 25%;
height: 100%;
box-sizing: border-box;
}
table, th, td{
border-bottom:1px solid black;
text-align: left;
padding: 10px;
}
.cat{
background-color:rgb(0, 0, 107);
color: white;
border-radius: 4px;
}
.holder{
width:100%;
display: flex;
flex-direction:row;
}
.lone-image{
background:blue;
width:60%;
height: 100%;
}
.stacked-image{
display: flex;
flex-direction: column;
height: 100%;
width: 40%;
}
.canon{
width: 100%;
background:green;
height:50%;
}
.dell{
background:red;
width: 100%;
height: 50%;
}
<div class="container">
<div class="table">
<table>
<tr>
<th class="cat"> Categories</th>
</tr>
<tr>
<th> Electronics</th>
</tr>
<tr>
<th>Clothing</th>
</tr>
<tr>
<th> Music & Equipment</th>
</tr>
<tr>
<th> Footwear</th>
</tr>
<tr>
<th> Software Products</th>
</tr>
<tr>
<th> Computer Hardware</th>
</tr>
<tr>
<th> Mobile Phones</th>
</tr>
<tr>
<th> Laptops</th>
</tr>
<tr>
<th> Furniture</th>
</tr>
<tr>
<th> Beauty Products</th>
</tr>
<tr>
<th> Computer Accessories</th>
</tr>
</table>
</div>
<div class="holder">
<div class="lone-image">
</div>
<div class="stacked-image">
<div class="canon"></div>
<div class="dell"></div>
</div>
</div>
</div>
You were heading in the right direction I know flexboxes are really cool but they do take a little while to hang on.
Do tell me whether I was of any Help :)
I have a code that acts differently on Firefox and Chrome.
The behaviour I want is the one on Firefox. I want to reproduce it on Chrome without success.
In the following code, the idea is that the tr class="spacer" fills the remaining height below the the tr class="family" rows so they would be displayed at the top of the tr class="category" row.
On Chrome this is completely inconsistent...
.category th {
height: 200px;
background: red;
}
.family {
height: 70px;
background: blue;
}
<table>
<tbody>
<tr>
<th>Category</th>
<th>Family</th>
<th>Info</th>
</tr>
<tr class="category">
<th rowspan="3">Category 1</th>
</tr>
<tr class="family">
<td>Family 1</td>
<td>Many different things</td>
</tr>
<tr class="spacer">
<td colspan="3"></td>
</tr>
<tr class="category">
<th rowspan="4">Category 2</th>
</tr>
<tr class="family">
<td>Family 2</td>
<td>Other things</td>
</tr>
<tr class="family">
<td>Family 3</td>
<td>Way more things</td>
</tr>
<tr class="spacer">
<td colspan="3"></td>
</tr>
</tbody>
</table>
I think the problem is how you structure your table but I have no solution using html tables.
I would rather use the css grid property. It needs a little bit more code but it provides in my Opinion more options a better responsiveness and so on.
I wrote down some code to display the same as you want with the tables. Of course you can modify the code to make it work more like you planned but it‘s a basic structure.
Html:
<div class="grid">
<div>Category</div>
<div>Family</div>
<div>Info</div>
<div class="first">
<div class="grid-category">Category 1</div>
<div class="family">Family 1</div>
<div class="family">Many different things</div>
</div>
<div class="second">
<div class="grid-category">Category 2</div>
<div class="family">Family 2</div>
<div class="family">Many different things</div>
<div class="family">Family 3</div>
<div class="family">Many different things</div>
</div>
</div>
Css:
.grid-category {
min-height: 200px;
background: red;
}
.family {
height: 70px;
background: blue;
}
.grid {
display: inline-grid;
grid-gap: 4px;
grid-template-columns: auto auto auto;
grid-template-rows: 16px auto auto;
}
.first,
.second {
display: grid;
grid-column: 1 / 4;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
}
.grid-category {
grid-row: 1 / 4;
}
According to this example https://www.w3schools.com/tags/att_td_rowspan.asp, I rewrite your code like this. Hope this help you.
<html>
<head>
<style>
.custom th {
height: 200px;
background: red;
}
.custom td {
height: 70px;
background: blue;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>Category</th>
<th>Family</th>
<th>Info</th>
</tr>
<tr class="custom">
<th rowspan="3">Category 1</th>
<td>Family 1</td>
<td>Many different things</td>
</tr>
<!-- Add 2 spacer for enough 3 row because rowspan = 3 -->
<tr class="spacer">
<td colspan="3"></td>
</tr>
<tr class="spacer">
<td colspan="3"></td>
</tr>
<tr class="custom">
<th rowspan="4">Category 2</th>
<td>Family 2</td>
<td>Other things</td>
</tr>
<tr class="custom">
<td>Family 3</td>
<td>Way more things</td>
</tr>
<tr class="spacer">
<td colspan="3"></td>
</tr>
<tr class="spacer">
<td colspan="3"></td>
</tr>
</tbody>
</table>
</body>
</html>
I'm struggling with TABLE HTML.
I have no idea why this table tag doesn't work properly in browser
<table border="1">
<tbody>
<tr>
<td rowspan="2">1-1</td>
<td rowspan="3">2-1</td>
</tr>
<tr>
<td rowspan="2">1-2</td>
</tr>
<tr>
<td rowspan="3">2-2</td>
</tr>
<tr>
<td rowspan="2">1-3</td>
</tr>
</tbody>
</table>
The html above would be rendered like this
However the view I expected to see is like this
As I figured out, If I want to see what I want in browser, I should fix rowspans like this
<table border="1">
<tbody>
<tr>
<td rowspan="1">1-1</td>
<td rowspan="2">2-1</td>
</tr>
<tr>
<td rowspan="2">1-2</td>
</tr>
<tr>
<td rowspan="2">2-2</td>
</tr>
<tr>
<td rowspan="1">1-3</td>
</tr>
</tbody>
</table>
But I'm really wondering what's different and why The browser (Chrome) doesn't render the first one properly and does the second one.
According to W3C there is no way to specify float value like 1.5 for rowspan but some tweaks like below may help.
<table border="1">
<tbody>
<tr>
<td rowspan="2">1-1</td>
</tr>
<tr>
<td rowspan="2">1-2</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
</tr>
<tr>
<td rowspan="3">2-2</td>
</tr>
<tr>
<td rowspan="2">3-1</td>
</tr>
</tbody>
</table>
Have you tried flexbox yet? It is little bit different approach to solve this.
#main {
width: 100px;
height: 150px;
border: 1px solid #c3c3c3;
align-items: stretch;
display: flex;
flex-flow: column wrap;
}
#main div {
width: 50px;
height: 50px;
line-height: 45px;
text-align: center;
}
#right {
width: 50px;
height: 150px;
}
#right div {
width: 50px;
height: 75px;
line-height: 70px;
text-align: center;
}
<div id="main">
<div style="background-color:lightgrey;" >1-1</div>
<div style="background-color:grey;">1-2</div>
<div style="background-color:lightgrey;">1-3</div>
<div id="right">
<div id="right" style="background-color:lightblue;">2-1</div>
<div id="right" style="background-color:lightgreen;">2-2</div>
</div>
</div>
Given a table with a column that contains numbers, I'd like to position them in the center.
But, I'd like to right-align the numbers as well!
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Outputs:
Desired output:
Note: The table cell width should be constant (200px), regardless of the numbers. For example, if all numbers are 0, they all should be in the center of the table:
Also:
You are allowed to modify the content of the <td>s, but there should be one number per <tr>.
CSS only, please.
Updated based on an edit of the question and a few comments
In a comment you wrote "In the desired outcome, the cell width stays the same (200px) as numbers change".
In another comment you wrote "...my numbers are links and I want them to occupy the full cell width".
Given those requirements, the only CSS based solution I can find is, where one use CSS Table instead of <table> elements, an anchor a element displayed as table-row, making the full width clickable without adding an event handler, and for the centering, using pseudo elements to puch the numbers to the middle.
Stack snippet
.table {
display: table;
border: 1px solid black;
}
.tr {
display: table-row;
text-decoration: none;
color: black;
}
.tr span {
display: table-cell;
width: 200px;
}
a.tr {
text-align: right;
}
.tr::before, .tr::after {
content: '';
display: table-cell;
width: 50%;
}
<div class="table">
<div class="thead">
<span class="tr">
<span>Amount</span>
</span>
</div>
<div class="tbody">
<a href="#1" class="tr">
<span>45</span>
</a>
<a href="#2" class="tr">
<span>2</span>
</a>
<a href="#3" class="tr">
<span>18923538273</span>
</a>
<a href="#4" class="tr">
<span>9823</span>
</a>
</div>
</div>
<div class="table">
<div class="thead">
<span class="tr">
<span>Amount</span>
</span>
</div>
<div class="tbody">
<a href="#1" class="tr">
<span>0</span>
</a>
<a href="#2" class="tr">
<span>0</span>
</a>
<a href="#3" class="tr">
<span>0</span>
</a>
<a href="#4" class="tr">
<span>0</span>
</a>
</div>
</div>
_____________________________________________________________________________
This is my first answer, which I will leave, as there might be someone that can make use of it as is.
One simple way to accomplish that is to simply nest a table for the values, center it using auto margin and right align its td's content.
This way you will get pretty much the exact same behavior as with your original markup, but get a better control of the values alignment.
Stack snippet
table {
border: 1px solid black;
}
th {
width: 200px;
}
table table {
border: none;
margin: 0 auto;
}
table table td {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
You can of course use div's instead of a table, displayed as inline block or inline flex column.
Inline block
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td > div {
display: inline-block;
}
td > div > div {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>45</div>
<div>2</div>
<div>18923538273</div>
<div>9823</div>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>0</div>
</div>
</td>
</tr>
</tbody>
</table>
Inline flex column
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td > div {
display: inline-flex;
flex-direction: column;
}
td > div > div {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>45</div>
<div>2</div>
<div>18923538273</div>
<div>9823</div>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>0</div>
</div>
</td>
</tr>
</tbody>
</table>
TL;DR:
table {
border: 1px solid black;
width: 200px;
}
td {
text-align: right;
min-width: 10px;
}
td:first-child, td:last-child {
width: 50%;
}
... and adding an extra column before and after the existing one. jsFiddle here.
Initial answer:
Considering your markup,
td {
text-align: right;
border-left:7rem solid transparent;
border-right:7rem solid transparent;
}
... should do it.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
border-left:7rem solid transparent;
border-right:7rem solid transparent;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Any other solution involves changing the markup (you need to add inner elements inside <td>s, give them smaller width than the <td>, and right align their text). You can do it by modifying the HTML source or on the fly, using JavaScript.
After a good number of tries, the only reliable solution I found (implying markup modification and no JavaScript), was to add additional columns in the table, relying on the table's ability to line up all the cells in a column.
I updated the snippet below so that the column occupies the minimum necessary width, based on most wide number and right-aligns all cells based on resulting width width. This means that when all values are 0, the entire row of values are centered. Here it is:
table {
border: 1px solid black;
width: 200px;
}
td {
text-align: right;
min-width: 10px;
}
td:first-child, td:last-child {
width: 50%;
}
/* just stacking tables side by side, not part of solution */
table {
float: left;
width: 200px;
margin-right: 7px;
}
body { overflow-y: hidden;}
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>45</td>
<td></td>
</tr>
<tr>
<td></td><td>2</td><td></td>
</tr>
<tr>
<td></td><td>0</td><td></td>
</tr>
<tr>
<td></td><td>1234</td><td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>0</td>
<td></td>
</tr>
<tr>
<td></td><td>2</td><td></td>
</tr>
<tr>
<td></td><td>1</td><td></td>
</tr>
<tr>
<td></td><td>4</td><td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>44</td>
<td></td>
</tr>
<tr>
<td></td><td>0</td><td></td>
</tr>
<tr>
<td></td><td>1155</td><td></td>
</tr>
<tr>
<td></td><td>1234548775564</td><td></td>
</tr>
</tbody>
</table>
make text-align:right and padding-right:5emin td css selector
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
padding-right: 4em;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
<style>
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
float:right; <!--added this-->
margin-right:50px; <!-- and this-->
}
</style>
I added float:right in td
adjust the margin-right value to your desired value;
One option is to change the display property for td elements to block
You can then set a max-width to bring td elements to the center of tr elements.
Once that's done you set the text-align property to right for td elements to make the numbers start from the right hand side.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
display: block;
max-width: 70%;
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Wrap your numbers with element(span) inside the td and add the text align right styles on it.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td span {
width: 150px;
text-align: right;
background: beige;
display: inline-block;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>45</span></td>
</tr>
<tr>
<td><span>2</span></td>
</tr>
<tr>
<td><span>18923538273</span></td>
</tr>
<tr>
<td><span>9823</span></td>
</tr>
</tbody>
</table>
.table {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
background-color: red;
flex-direction: column;
}
div {
text-align: right;
}
<body>
<div class='table'>
<div>
<div>1</div>
<div>1111111</div>
<div>1111111111111</div>
</div>
</div>
</body>
text-align :right ----> pulls the text into right end
padding-right: 50% or padding-left : 50% ----> add space from the right or left to center
use 45 - 49 percentage in padding to make a crisp center alignment depends on your requirement
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
padding-right: 50%;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
I would greatly appreciate help figuring this out. I'm working on a HTML table puzzle trying to match this image here:
I have everything good, make the red pillars on both sides using the rowspan tag, have the 1st, 2nd, 4th, and 5th row good, but the third row, with the three purple rectangles I just can't get to center themselves and resize to the smaller size without breaking the table.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body { background-color:black;}
table { background-color:white;
margin: 0px auto;
width:1000px;
height:500px;}
td { width:200px;
height:100px;
}
</style>
</head>
<body>
<table border="2px solid white">
<tr>
<td bgcolor="red" rowspan="5" align="left"></td>
<td bgcolor="white"></td>
<td bgcolor="green" colspan="2" align="center" colspan="2"></td>
<td bgcolor="white"></td>
<td bgcolor="red" rowspan="5" align="right"></td>
</tr>
<tr>
<td bgcolor="blue" colspan="4"></td>
</tr>
<tr>
<td bgcolor="purple"></td>
<td bgcolor="purple"></td>
<td bgcolor="purple"></td>
</tr>
<tr>
<td bgcolor="green" colspan="4"></td>
</tr>
<tr>
<td bgcolor="purple" colspan="4"></td>
</tr>
</table>
</body>
</html>
You need more columns:
body {
background-color: black;
}
table {
background-color: white;
margin: 0px auto;
width: 1000px;
height: 500px;
border: 2px solid white;
}
td {
width: 200px;
height: 100px;
}
.red { background-color: red }
.white { background-color: white }
.green { background-color: green }
.blue { background-color: blue }
.purple { background-color: purple }
<table>
<tr>
<td class="red" rowspan="5"></td>
<td class="white" colspan="2" ></td>
<td class="green" colspan="3" ></td>
<td class="white" colspan="2" ></td>
<td class="red" rowspan="5"></td>
</tr>
<tr>
<td class="blue" colspan="7" ></td>
</tr>
<tr>
<td class="white" ></td>
<td class="purple" ></td>
<td class="white" ></td>
<td class="purple" ></td>
<td class="white" ></td>
<td class="purple" ></td>
<td class="white" ></td>
</tr>
<tr>
<td class="green" colspan="7" ></td>
</tr>
<tr>
<td class="purple" colspan="7" ></td>
</tr>
</table>
Is this some kind of homework exercise? Anyways, instead of centering your table cells, try to add white table cells. You need more columns. And you have to recalculate your colspan attributes. Good luck!
It really doesn't seem too complex.
Just draw the wanted result on squared paper and you should be able to immediately detect the correct rowspan/colspan values to use.
Just note that when writing down the HTML you need to completely skip the <td>...</td> for cells that end up in the "extension" of cells considered before in the sequence.
For example consider a simple 4 rows x 3 cols table:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
td { width:30px; height: 30px; text-align:center; }
</style>
</head>
<body>
<table border=1>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>
</html>
If you want to merge 1 and 2 you need to declare colspan=2 on the cell 1 and then omit cell 2. Similarily if you want to merge 5/6/8/9 you need to declare colspan=2 rowspan=2 on cell 5 and omit the merged ones:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
td { width:30px; height: 30px; text-align: center; }
</style>
</head>
<body>
<table border=1>
<tr>
<td colspan=2>12</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td colspan=2 rowspan=2>56<br/>89</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>
</html>
One alternative could be flexbox. I'm not saying it's better than a table, but this could be done as follows:
See: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
While I am very fond of flexbox, a table works at least as well for this issue (though if what you wanted were to change the right ways flexbox may become a better solution).
style:
#parent {
margin: 0px;
padding: 0px;
padding-left: 20vw;
padding-right: 20vw;
background-color: red;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
align-items: stretch;
height: 100vh;
}
.row, .row-sm {
padding: 2px;
padding-bottom: 0px;
flex: 1;
background-color: white;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: stretch;
align-items: stretch;
}
.row:last-child {
padding-bottom: 2px;
}
.row > div {
flex: 1;
}
#centered {
-webkit-justify-content: center;
justify-content: center;
}
#centered > div {
flex: initial;
width: 40%;
background-color: #655900;
}
#sm3 {
flex: .5;
/* This would not require the spacing divs; however, the start and end gap would be half the size it should be
-webkit-justify-content: space-around;
justify-content: space-around;
*/
}
#sm3 > div {
width: 16.6666%;
background-color: white;
}
#sm3 > div:nth-child(even) {
background-color: #111155;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.purple {
background-color: purple;
}
<div id="parent">
<div class="row" id="centered">
<div></div>
</div>
<div class="row">
<div class="blue"></div>
</div>
<div class="row" id="sm3">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="row">
<div class="green"></div>
</div>
<div class="row">
<div class="purple"></div>
</div>
</div>
NOTE: While this version scales, it could also be adjusted to have fixed content sizes; however, fixed content sizes could be done easily without flex anyway (just divs width widths/heights padding, ect).
<!DOCTYPE html>
<html>
<head>
<style>
td{
width: 75px;
height: 100px;
}
.r{
background-color: red;
}
.w{
background-color: white;
}
.g{
background-color: green;
}
.b{
background-color: blue;
}
.p{
background-color: purple;
}
</style>
</head>
<body>
<table border="0">
<tr>
<td class="r" rowspan="9" colspan="2" style="width:150px;"></td class="r">
<td class="w" rowspan="2" colspan="2"></td class="w">
<td class="g" rowspan="2" colspan="3"></td class="g">
<td class="w" rowspan="2" colspan="2"></td class="w">
<td class="r" rowspan="9" colspan="2" style="width:150px;"></td class="r">
</tr>
<tr>
</tr>
<tr>
<td class="b" rowspan="2" colspan="7"></td class="b">
</tr>
<tr>
</tr>
<tr>
<td class="w" style="height: 50px;"></td class="r">
<td class="p" style="height: 50px;"></td class="r">
<td class="w" style="height: 50px;"></td class="r">
<td class="p" style="height: 50px;"></td class="r">
<td class="w" style="height: 50px;"></td class="r">
<td class="p" style="height: 50px;"></td class="r">
<td class="w" style="height: 50px;"></td class="r">
</tr>
<tr>
<td class="g" rowspan="2" colspan="7"></td class="r">
</tr>
<tr>
</tr>
<tr>
<td class="p" rowspan="2" colspan="7"></td class="r">
</tr>
</table>
</body>
</html>
clickhere