basic HTML <table> troubles

[babadoctor]

So for my computer science class my teacher asked me to program two tables inside another table which are 3x2 with images in them. He asked that the tables be next to each other, too.

 

I think I understand how to do this: make a table with the images, make another table with more images (both 3x2) AND THEN make another table surrounding both tables, and have a <tr></tr> surrounding both tables, then surround the separate single 3x2 tables with <td>, right???

 

Well, it isn't working, I am confused, and I don't know what to do  I will never be a good programmer if I can't understand basic stuff like this!!!!!

Here is my code...

https://hastebin.com/amaluwobin.xml

 

 

Please help  My teacher assigned this friday and said we would have a test on it tomorrow  

[.Ocean]

You would want to make a 2x1 table originally and then in each of the two cell tags create another table for each of them normally. It seems you have the right idea but you are just confusing yourself

[bcguru9384]

think 2 player splitscreen

each player get 3x1 gives full screen 3x2

2 images in 1 widescreenbox

[babadoctor]

1 minute ago, bcguru9384 said:

think 2 player splitscreen

each player get 3x1 gives full screen 3x2

2 images in 1 widescreenbox

Sorry I phrased the question wrong

 

Each individual table is 3x2...

[Cool Guy]

Don't do all the classes and crap this this doc is showing, but the raw HTML . This is a great reference if you need one https://v4-alpha.getbootstrap.com/content/tables/  So, DON'T FOLLOW THE CODE, but FOLLOW THE STRUCTURE.  

 

I can post the actual code, but Im at college and on my phone so.... Just wanted to say, your pic, I know you aren't dumb but I can't help but think this post was made by a retarded 5 year old by looking at your pic lol.  

It can be difficult to imagine tables and organizing them, there is a learning faze for everything. When you can visualize them accurately then you'll never have this trouble again.  Don't think you're dumb, every learning coder or programmer goes through something like it.  

 

Fuck it --

Spoiler

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

 

[babadoctor]

1 minute ago, Cool Guy said:

Don't do all the classes and crap this this doc is showing, but the raw HTML . This is a great reference if you need one https://v4-alpha.getbootstrap.com/content/tables/  So, DON'T FOLLOW THE CODE, but FOLLOW THE STRUCTURE.  

 

I can post the actual code, but Im at college and on my phone so.... Just wanted to say, your pic, I know you aren't dumb but I can't help but think this post was made by a retarded 5 year old by looking at your pic lol.  

 

I can be difficult to imagine tables and organizing them, there is a learning faze for everything. When you can visualize them accurately then you'll never have this trouble again.  Don't think you're dumb, every learning coder or programmer goes through something like it.  

Thanks!

[Cool Guy]

4 minutes ago, babadoctor said:

Thanks!

Check my edited post above

[babadoctor]

2 minutes ago, Cool Guy said:

Check my edited post above

I did it this way; it is really hard to read but works 

https://pastebin.com/9Ugn3R47

 

Basically I scaffolded where the original tables should go instead of trying to add around it the tr tags; as that was SUPER CONFUSING.

 

then copied and pasted the original tables in

 

I will do this from now on for things that are too complicated to read

[bcguru9384]

2 hours ago, babadoctor said:

Sorry I phrased the question wrong

 

Each individual table is 3x2...

still does not matter 

you have 1 screen with whatever aspect ratio thats gonna host 2 screens with their own aspect ratios

this aspect ratio difference is what has to have a common ground 

 

2 screens have to share 50% of full screen(well 49.999999999%)

Edited June 26, 2017 by bcguru9384
further define

[vorticalbox]

11 hours ago, babadoctor said:

I did it this way; it is really hard to read but works 

https://pastebin.com/9Ugn3R47

 

Basically I scaffolded where the original tables should go instead of trying to add around it the tr tags; as that was SUPER CONFUSING.

 

then copied and pasted the original tables in

 

I will do this from now on for things that are too complicated to read

please don't put tables inside tables.

 

 

Edit: You should be using divs to do the layout and tables to store the data, you shouldn't use tables for layout like this.

 

<!DOCTYPE html>
<html>
<head>
	<title> </title>
	<style>
		.container{
		}
		.left{
			float: left;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="left">
			<table border="1">
				<tr>
					<td><img src="http://i.imgur.com/L08AEgT.jpg" width="50" height="50"></td>
					<td><img src="http://i.imgur.com/JNcF8im.jpg" width="50" height="50"></td>
					<td><img src="http://i.imgur.com/wCVnnxt.png" width="50" height="50"></td>
				</tr>
				<tr>
					<td><img src="http://i.imgur.com/L08AEgT.jpg" width="50" height="50"></td>
					<td><img src="http://i.imgur.com/JNcF8im.jpg" width="50" height="50"></td>
					<td><img src="http://i.imgur.com/wCVnnxt.png" width="50" height="50"></td>
				</tr>
				<tr>
					<td><img src="http://i.imgur.com/L08AEgT.jpg" width="50" height="50"></td>
					<td><img src="http://i.imgur.com/JNcF8im.jpg" width="50" height="50"></td>
					<td><img src="http://i.imgur.com/wCVnnxt.png" width="50" height="50"></td>
				</tr>
				<tr>
					<td><img src="http://i.imgur.com/L08AEgT.jpg" width="50" height="50"></td>
					<td><img src="http://i.imgur.com/JNcF8im.jpg" width="50" height="50"></td>
					<td><img src="http://i.imgur.com/wCVnnxt.png" width="50" height="50"></td>
				</tr>
			</table>
		</div>
		<div class="left">
			<table border="1">
				<tr>
					<td><img src="http://i.imgur.com/L08AEgT.jpg" width="50" height="50"></td>
					<td><img src="http://i.imgur.com/JNcF8im.jpg" width="50" height="50"></td>
					<td><img src="http://i.imgur.com/wCVnnxt.png" width="50" height="50"></td>
				</tr>
				<tr>
					<td><img src="http://i.imgur.com/L08AEgT.jpg" width="50" height="50"></td>
					<td><img src="http://i.imgur.com/JNcF8im.jpg" width="50" height="50"></td>
					<td><img src="http://i.imgur.com/wCVnnxt.png" width="50" height="50"></td>
				</tr>
				<tr>
					<td><img src="http://i.imgur.com/L08AEgT.jpg" width="50" height="50"></td>
					<td><img src="http://i.imgur.com/JNcF8im.jpg" width="50" height="50"></td>
					<td><img src="http://i.imgur.com/wCVnnxt.png" width="50" height="50"></td>
				</tr>
				<tr>
					<td><img src="http://i.imgur.com/L08AEgT.jpg" width="50" height="50"></td>
					<td><img src="http://i.imgur.com/JNcF8im.jpg" width="50" height="50"></td>
					<td><img src="http://i.imgur.com/wCVnnxt.png" width="50" height="50"></td>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>

This makes it much more manageable as each table of data is separated rather than being nested in other tables.