What is the HTML code to display a table and a video/image side by side?

I'm facing a challenge while trying to create a website. I want to place a table in the center of the page, with videos on either side of it. However, whenever I attempt this, the table ends up below the videos instead of being aligned with them. I've tried various methods but cannot seem to get the table to stay at the top of the page and stay on the same plane as the videos. I have created a simple "website" to demonstrate this issue. You can copy and paste this code into an HTML viewer to see the problem for yourself. Any help in fixing this would be greatly appreciated!

<html><head><title>Example Website</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><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><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=GPhevCerkOI">src=""
</iframe><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>

javascripthtmlcssfrontendvisual-glitch

Answer №1

As a newcomer with limited reputation points, I am unable to comment or ask for more clarification on your desired layout. However, in situations like this, I usually utilize the flex property for positioning. Another effective option is using grids.

If you are interested in learning more about flex, I recommend checking out this helpful guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

For practical examples that may assist you, consider exploring these resources: https://www.w3schools.com/css/css3_flexbox_container.asp

Answer №2

To achieve a consistent layout for your YouTube videos, you can utilize the flex property within DIV containers as suggested by chase. By setting each column to 33.33% width, you ensure a uniform size and allow the table to adjust seamlessly within the designated space.

.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 class="flex-container">
  <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 class="flex-container">
  <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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Revamp Label on Yii Update Button

I am in the process of integrating a like button into Yii. When I click on the button, it triggers a controller action that increments the number of likes by 1 and updates the Button label to display the new value. How can I achieve this? Here is my view ...

javascriptphpajaxyii

Techniques for parsing a String in Objective-C

I am looking to parse a string to replace certain elements within it. If the string contains an <ol> tag, I want to specifically focus on replacing the <li> elements with numbers. I understand that I can utilize the rangeOfString method to c ...

htmlobjective-ciosxcodeparsing

Ways to eliminate a textbox from an HTML table using jQuery or JavaScript while retaining the textbox values

Currently, I am facing a task where I have a table with a column filled with textboxes. My goal is to eliminate the textboxes using jQuery/JavaScript while retaining the values within them. Here are a couple of methods I have attempted: // removes both t ...

javascriptjqueryhtml

Transforming a canvas into a div element

Hey there, I'm looking to swap out one canvas for another but I'm not sure how it will look on the browser. Any help would be greatly appreciated. <div id="juego"> <canvas width="203" height="256" id="1" class="bloque"></canvas& ...

javascriptcanvaselementswap

What is causing this JavaScript alert to malfunction?

My current project involves working with ASP.NET and in the view, I have a code snippet that is causing some issues. When I attempt to use Sweet Alert outside of the function, it works perfectly fine. Similarly, if I switch out Sweet Alert for a regular al ...

javascripthtmlasp.netalertsweetalert

Enhance your video with Bootstrap 4 by overlaying text and buttons

I am in search of a solution that resembles the following design, but it needs to be styled using Bootstrap 4. Here is my current code snippet: <section class="banner embed-responsive-item"> <video class="hidden-sm-down" autoplay="" loop=""& ...

htmltwitter-bootstraphtml5-videobootstrap-4

Resolving the issue of nested modals within Bootstrap

I am experiencing some issues with my customer visits list page. When I try to add a visit, it opens a bootstrap popup ("#Pop1") to record the visit details. Within this modal, there is an option to add a new customer on the spot, which then triggers anoth ...

javascriptjquerycsstwitter-bootstrapmodal-dialog

What is the best way to show a tooltip alongside highlighted text?

How can I display a tooltip (using qTip) next to selected text? The code below captures the selected text in the console, but the tooltip is not displayed. <div class='test'>Actual text will be much longer...Test Test Test Test Test Test T ...

javascripttooltipqtip

Next.js Content Switching: A Step-by-Step Guide

On my app, I have a main dashboard featuring a sidebar navigation and content container. However, being new to next.js and its routing system, I'm unsure how to update the content when a user navigates using the sidebar. Do I need to create separate p ...

javascriptreactjsreact-routernext.js

iOS 7.0.x causing issues with the height of tabs being trimmed

Struggling to fix a nightmare of an issue with my app, so I'm reaching out for some help. Everything is working fine on Android and iOS versions 7.1.x, 8, and 9. However, when installed on iOS 7.0.4, the bottom tabs are getting cut off. See below: O ...

ioscssiphoneios7ionic-framework

Obtain the radio button value along with the values of all other input fields

$('.cinput').each(function(){ console.log($(this).val()); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='radio' name='radiox' class='cinput' v ...

jqueryhtml

Encountering difficulties in fetching data with formData in nextJS

Exploring the realm of NextJS and delving into server side actions. I'm facing a challenge with this specific request. import { revalidatePath } from "next/cache"; export async function submitIPCR(prevState: any, formData: FormData) { / ...

javascriptreactjsnext.js

Executing a request via ajax using a radio button

Here is the input that I am working with: <input id="offline-42" onclick="javascript:checkoutSwitch(false);controlDivPayment('42');" name="payment" type="radio" value="offline-42" /> I am attempting to use ajax to add a product to the sh ...

javascriptjqueryajax

Error in Node.js: Cannot listen on socket.io object as it does not have a 'listen' method

I am currently developing a Node application using socket.io version 0.9.13 alongside Express 3.0.6. I am encountering an issue where the app fails to run due to an error stating that socket.io does not have a method called listen(). Here is the code snipp ...

javascriptnode.jsexpresssocket.io

Struggling to grasp the concept of PHP LZW decompression function within JSend framework

I am currently working on converting the LZW decompressor from PHP to JavaScript and I have encountered a function that is giving me some trouble. function decompressLZW(aCodes) { var sData = ''; var oDictionary = []; for (var i = 0; i &l ...

phpjavascriptcompressionlzw

Version 5.0.4 of Mui, when used with makeStyles and withStyles, is experiencing issues with applying styles to Mui

I've been diving into a react project using Mui v5.0.4 and encountered an unexpected issue with my custom styles. Initially, everything was functioning smoothly, but suddenly the styles I had defined were no longer appearing as intended in components ...

javascriptreactjsmaterial-ui

Implementing dropdown filtering for nested ng-repeats in Angular application

I currently have the following data structure set up: vm.years = [{ year: number, proevents: [{year: number, division: string, level: string, place: string, names: string}], nonproevents: [{year: number, division: string, level: string, place: st ...

javascriptangularjsangularjs-ng-repeat

Receiving communication without the need for port forwarding

My goal is to establish a system where a server can send messages to clients at any given time, ensuring that when a message is sent, it is received almost immediately (ideally within 1 second or less). I am looking for a way to achieve this without having ...

javascriptnode.jsnetwork-programming

Experience interactive video playback by seamlessly transitioning a webpage video into a pop-up when clicking on an

I want to have a video play as a pop-up when the user clicks a play button, while also fading out the background of the page. It should be similar to the way it works on this website when you click to watch a video. How can I achieve this? <div class=" ...

javascripthtmlcss

What is the best method for creating a fade effect on a div background?

I am trying to animate a div with the id #test from a 0 opacity background to an opacity of 0.7 using CSS rgba values, but for some reason, the .animate function is not working as expected. Here is my CSS: #test { background-color: rgba(0, 0, 0, 0); ...

javascriptjquerycssjquery-animateopacity