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
Related
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>
I want to give a spec table for the Watch 4. For now, I have this code.
<div class="specs">
<ul class="info">
<li>Lengte</li>
<li>44 mm</li>
</ul>
</div>
<div class="specs">
<ul class="info">
<li>Breedte</li>
<li>43.3 mm</li>
</ul>
</div>
with this CSS code
.specs{
position: relative;
top: 20px;
display: flex;
flex-direction: row;
align-items: center;
}
.info{
display: flex;
flex-direction: row;
color: black;
align-items: center;
margin-left: auto;
margin-right: auto;
border-bottom: 1px black solid;
padding: 0;
}
.info li{
display: flex;
flex-direction: row;
margin-right: 200px;
margin-left: 200px;
}
Here is the full project https://jsfiddle.net/2wvfyg16/
You might have to make the CSS tab bigger.
All the way at the bottom at the tab "Verbindungen".
It is all miss aligned.
As the data appears to be tabular, this snippet is a simple start on setting out the two columns with spacing in an HTML table.
Obviously you'll want to change things to give the exact layout your want but it does demonstrate that an HTML table can give the sort of formatting required.
#specs {
width: 100vw;
border-collapse: collapse;
}
#specs th {
font-size: 3em;
text-align: left;
padding-top: 1em;
}
#specs td {
width: 50%;
padding: 1em 5em;
}
#specs td {
font-size: 2em;
}
#specs tr:not(.cat) {
border-bottom: solid 1px black;
padding: 1em;
}
<table id="specs">
<tr class="cat">
<th colspan="2">Formaat</th>
</tr>
<tr>
<td>Lengte</td>
<td>44 mm</td>
<tr>
<td>Breedte</td>
<td>43.3 mm</td>
</tr>
<tr>
<td>Hoogte</td>
<td>9.8 mm</td>
</tr>
<tr>
<td>Gewicht</td>
<td>30 gram</td>
</tr>
<tr>
<td>Stofdicht</td>
<td>Ja</td>
</tr>
<tr>
<td>Spatwaterdicht</td>
<td>Ja</td>
</tr>
<tr>
<td>Waterdicht</td>
<td>Ja</td>
</tr>
<tr class="cat" colspan="2">
<th colspan="2">Display</th>
</tr>
<tr>
<td>Schermgrootte</td>
<td>40 & 44 mm</td>
</tr>
<tr>
<td>Schermtype</td>
<td>OLED</td>
</tr>
<tr class="cat" colspan="2">
<th colspan="2">Processor</th>
</tr>
<tr>
<td>Chipset</td>
<td>Samsung Exynos W920</td>
</tr>
<tr>
<td>Opslagcapaciteit</td>
<td>16 GB</td>
</tr>
<tr>
<td>Werkgeheugen</td>
<td>1500 MB</td>
</tr>
<tr class="cat" colspan="2">
<th colspan="2">Software</th>
</tr>
<tr>
<td>Besturingssysteem</td>
<td>One UI Watch</td>
</tr>
<tr class="cat" colspan="2">
<th colspan="2">Sensoren</th>
</tr>
<tr>
<td>Accelerometer</td>
<td>Jas</td>
</tr>
<tr>
<td>Hartslagmeter</td>
<td>Ja</td>
</tr>
<tr>
<td>Gyroscoop</td>
<td>Ja</td>
</tr>
<tr>
<td>GPS</td>
<td>Ja</td>
</tr>
<tr class="cat" colspan="2">
<th colspan="2">Batterij</th>
</tr>
<tr>
<td>Capaciteit</td>
<td>361 mAh</td>
</tr>
<tr>
<td>Vervangbaar</td>
<td>Nee</td>
</tr>
<tr class="cat" colspan="2">
<th colspan="2">Verbindingen</th>
</tr>
<tr>
<td>WiFi</td>
<td>Ja</td>
</tr>
<tr>
<td>Mobiel Netwerk</td>
<td>Nee</td>
</tr>
<tr>
<td>Bluetooth</td>
<td>Bluetooth 5.0</td>
</tr>
<tr>
<td>NFC</td>
<td>Ja</td>
</tr>
</table>
use justify items center i think it would work for that problem
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'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>
Have a look on target code.Here I am trying to split the main div into 2 equal halves and place the 2 tables at center of each of them.
Please help me to do the same
<div id="title">
Split Screen into 2 equaly halves
</div>
<div >
<table id="myTable">
<tr >
<td ></td>
<td class="row_bottom"></td>
<td ></td>
</tr>
<tr >
<td class="row_top"></td>
<td class="row"></td>
<td class="row_top"></td>
</tr>
<tr >
<td ></td>
<td class="row_bottom"></td>
<td ></td>
</tr>
</table>
<table id="myTable">
<tr >
<td ></td>
<td class="row_bottom"></td>
<td ></td>
</tr>
<tr >
<td class="row_top"></td>
<td class="row"></td>
<td class="row_top"></td>
</tr>
<tr >
<td ></td>
<td class="row_bottom"></td>
<td ></td>
</tr>
</table>
</div>
There is no such thing as splitting one element into two halves. Instead make 2 elements and position them properly.
Make divs 50% of the width of the parent element (body in this case). Make them float to the left.
Align the tables inside using
margin: 50px auto;
Solution: https://jsfiddle.net/hnmgnLat/2/
Place the two tables in different divs.set the width of the two divs to 45% each. Then set the float of the first div to left. I hope this works. The 45% width should give room for margin and padding in case it exist. Or better still set all padding and margin to 0px and set the width to 50%
try like this
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
add this style in css
.parent {
width: 100%;
margin: 0 auto;
}
.child {
min-width:50%;
display:inline-block;
}
you can use an ID only one TIME in your CODE and then you do an left and right float
or you can use flexbox
.row
{
border: 2px solid black;
width: 100px;
height: 100px;
}
.row_top
{
width: 100px;
height: 100px;
border-top:2px solid black;
border-bottom:2px solid black;
}
.row_bottom
{
width: 100px;
height: 100px;
border-left:2px solid black;
border-right:2px solid black;
}
.test{
display:flex;
flex-direction:row;
justify-content: space-around;
}
#title
{
text-align: center;
border-bottom: 1px solid black;
width: 250px;
margin: auto;
padding: 10px;
}
<div id="title">
Split Screen into 2 equaly halves
</div>
<div class="test">
<table id="myTableleft">
<tr >
<td ></td>
<td class="row_bottom"></td>
<td ></td>
</tr>
<tr >
<td class="row_top"></td>
<td class="row"></td>
<td class="row_top"></td>
</tr>
<tr >
<td ></td>
<td class="row_bottom"></td>
<td ></td>
</tr>
</table>
<table id="myTableright">
<tr >
<td ></td>
<td class="row_bottom"></td>
<td ></td>
</tr>
<tr >
<td class="row_top"></td>
<td class="row"></td>
<td class="row_top"></td>
</tr>
<tr >
<td ></td>
<td class="row_bottom"></td>
<td ></td>
</tr>
</table>
</div>