I'm having trouble moving/placing items in HTML. Can we experiment with rearranging the tables as demonstrated at the bottom (expected output)? Is it feasible to achieve a layout like the one below? Shifting the bottom section up next to the plots.
<html>
<style>
table {
{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
}
td,
th {
{
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
}
tr:nth-child(even) {
{
background-color: #dddddd;
}
}
</style>
<body>
<table>
<tr>
<th>Region</th>
<th>Experience</th>
<th>Paper</th>
</tr>
<tr>
<td>REGION</td>
<td>MInition</td>
<td>Papt</td>
</tr>
</table>
</body>
<br></br>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<body>
<canvas id="myChart" style="width:90%;max-width:600px"></canvas>
<div style="width:100%">
<div class="box">
<script>
var xValues = [1, 2];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
data: [1, 2],
borderColor: "red",
fill: false
}, {
data: [3, 4],
borderColor: "green",
fill: false
}, {
data: [4, 5],
borderColor: "blue",
fill: false
}, {
data: [6, 7],
borderColor: "black",
fill: false
}, {
data: [8, 9],
borderColor: "#8E44AD",
fill: false
}]
},
options: {
legend: {
display: false
}
}
});
</script>
</div>
<div class="box">
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>
</div>
</div>
<style>
.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
</style>The code above generates a layout similar to the image below. https://i.sstatic.net/kq2J6.png
Is it possible to achieve a layout like the one shown below? Moving the bottom section up next to the plots. https://i.sstatic.net/fw9kH.png