How do I put a table and a video/image on the same line in HTML?-CodePudding

I want to create a website but I've run into a problem. I want to put a table in the center of the page with videos on the left and right of the table. However, when I do this, the table ends up dropping below the videos and won't go on the same plane as the videos. I want the table to be in between but for some reason I can't get it to stay at the top of the page cause it just sticks to the bottom. I've whipped up a really small basic "website" to illustrate this problem. Just copy and past this code into an html reader and it should show you what I'm struggling with. If someone could fix this, it'd be greatly appreciated!

<html><head><title>blah blah blah</title><style>
body {
  background-color: #e6f44c;
}
    table, th, td {
  border:1px solid black;
}
</style></head><body><center><br><center><font size="7"><b>Welcome!</b></font><br><br></center><br><iframe style="float:left;" width="336" height="252" src="https://www.youtube.com/watch?v=ZObwftsdOIw">
</iframe><iframe style="float:right;" width="336" height="252" src="https://www.youtube.com/watch?v=gpHpEPe7OIo">
</iframe><br><br><br><br><br><br><br><br><br><br><br><br><br><br><iframe style="float:left;" width="336" height="252" src="https://www.youtube.com/watch?v=ZObwftsdOIw">
</iframe><iframe style="float:right;" width="336" height="252" src="https://www.youtube.com/watch?v=gpHpEPe7OIo">
</iframe><br><br><br><br><br><br><br><br><br><br><br><br><br><br><iframe style="float:left;" width="336" height="252" src="https://www.youtube.com/watch?v=ZObwftsdOIw">
</iframe><iframe style="float:right;" width="336" height="252" src="https://www.youtube.com/watch?v=ZObwftsdOIw">
</iframe><br><br><br><br><br><br><br><br><br><br><br><br><br><br><iframe style="float:left;" width="336" height="252" src="https://www.youtube.com/watch?v=ZObwftsdOIw">
</iframe><iframe style="float:right;" width="336" height="252" src="https://www.youtube.com/watch?v=ZObwftsdOIw">
</iframe><table style="float: center; width:600;"><tbody><tr><td><b><center>blah</center></b></td><td><b></b><center><b>blah</b></center></td><td><b><center>blah</center></b></td></tr><tr><td>blah</td><td>blah blah blah</td><td><font size="3">b;ah</font></td></tr></tbody></table></center>





</body></html>

CodePudding user response：

I'm new and don't have enough reputation to comment and ask clarifying questions on how exactly you want this to look, but for most positioning issues like this, I use flex. Another option is to use grids.

This is a great guide to flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

There are several examples here that might be useful for you: https://www.w3schools.com/css/css3_flexbox_container.asp

CodePudding user response：

On the same page as mentioned by chase, you can use the flex, and insert your youtube vids/iframe in DIVs to easily apply the same style. Applying the 33.33% width to each column will ensure the same size and the table will adjust to fit in the space provided.

.flex-container {
  display: flex;
  flex-direction: column;
  background-color: #e6f44c;
  float: left;
  width: 33.33%;
  padding: 20px;
}

table {
float: left;
  width: 33.33%;
  padding: 10px;
}

.flex-container > div {
  background-color: #e6f44c;
  width: 100%;
  text-align: center;
}

* {
  box-sizing: border-box;
}

<center><font size="7"><b>Welcome!</b></font><br><br></center>

<div >
  <div>
    <iframe style="width:100%" src="https://www.youtube.com/watch?v=ZObwftsdOIw">
         </iframe>
  </div>
  <div><iframe style="width:100%"  src="https://www.youtube.com/watch?v=gpHpEPe7OIo">
         </iframe>
  </div>
  <div><iframe style="width:100%"  src="https://www.youtube.com/watch?v=ZObwftsdOIw">
         </iframe>
   </div>  
</div>
<div>
<table style="float: center;">
            <tbody>
               <tr>
                  <td>
                     <b>
                        <center>blah</center>
                     </b>
                  </td>
                  <td>
                     <b></b>
                     <center><b>blah</b></center>
                  </td>
                  <td>
                     <b>
                        <center>blah</center>
                     </b>
                  </td>
               </tr>
               <tr>
                  <td>blah</td>
                  <td>blah blah blah</td>
                  <td><font size="3">blah</font></td>
               </tr>
            </tbody>
         </table>
</div>
<div >
  <div><iframe style="width:100%"  src="https://www.youtube.com/watch?v=gpHpEPe7OIo">
         </iframe>
   </div>
  <div><iframe style="width:100%"  src="https://www.youtube.com/watch?v=ZObwftsdOIw">
         </iframe>
   </div>
  <div><iframe style="width:100%"  src="https://www.youtube.com/watch?v=ZObwftsdOIw">
         </iframe>
         
  </div>  
</div>