Organizing 8 separate tables in HTML on One Page-CodePudding

I'm trying to organize 8 tables in html on one page and I'm having a hard time placing them. Any helpful tips? I attached the picture below for what I want the page to look like. I'd appreciate any feedback from the community. The tables hold different data.

T8 Tables on page

I tried different CSS classes for each table and I'm not successful. Maybe placing tables in html isn't possible?

CodePudding user response：

you could use grid, helpful here

you put your tables inside each div.

you can play with those values if you want to change row, col sizes

      grid-template-rows: 30% 30% 25% 15%;
      grid-template-columns: 1fr 1fr 1fr;

you can also add some gap

(and remove background color, it's only to visualize the different div. Same with container 100vw 100vh widht and height if not needed)

html,
body {
  margin: 0;
  padding: 0;
}

#container {
  display: grid;
  grid-template-rows: 30% 30% 25% 15%;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  width: 100vw;
  height: 100vh;
}

#div1 {
  grid-area: 1 / 1 / 3 / 2;
  background-color: rgba(242, 161, 133, 0.5);
}

#div2 {
  grid-area: 3 / 1 / 4 / 2;
  background-color: rgba(194, 36, 48, 0.5);
}

#div3 {
  grid-area: 4 / 1 / 5 / 2;
  background-color: rgba(130, 89, 39, 0.5);
}

#div4 {
  grid-area: 1 / 2 / 5 / 3;
  background-color: rgba(242, 237, 87, 0.5);
}

#div5 {
  grid-area: 1 / 3 / 2 / 4;
  background-color: rgba(95, 135, 96, 0.5);
}

#div6 {
  grid-area: 2 / 3 / 3 / 4;
  background-color: rgba(181, 119, 79, 0.5);
}

#div7 {
  grid-area: 3 / 3 / 4 / 4;
  background-color: rgba(184, 129, 60, 0.5);
}

#div8 {
  grid-area: 4 / 3 / 5 / 4;
  background-color: rgba(165, 223, 116, 0.5);
}

#container table {
  width: 100%;
  height: 100%;
}

<div id="container">
  <div id="div1">
    <table>
      <tr>
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
      </tr>
    </table>
  </div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>
  <div id="div4">div4</div>
  <div id="div5">div5</div>
  <div id="div6">div6</div>
  <div id="div7">div7</div>
  <div id="div8">div8</div>
</div>

CodePudding user response：

Tables can be placed in HTML and arranged on a page however you like. To create the tables and structure the data within them, use HTML table tags such as table>, tr>, td>, and th>. CSS can be used to set the position, size, and layout of the tables on the page.

Here are some pointers for inserting tables into HTML:

Table> tags are used to define the table and its rows and columns, which are defined with tr> and td> tags, respectively.

Set the width, height, padding, and other properties of the table using CSS.

To specify how the table should be displayed, use CSS's display property. Set it to inline-block to place the table on the same line as other elements, or block to place the table on its own line.

To specify how the table should float relative to other elements on the page, use CSS's float property. Set it to left or right to float the table to one side of the page, or none to make it not float at all.

To specify the space around the table, use CSS's margin and padding properties.

I hope these suggestions help you place tables in HTML and organise them on your page.