A <p>aragraph of <table>s

PHP
1

this may be an html question, but there may be no html solution, it may have to be done in php
ive been trying to make a list of videos display from left to right, top to bottom.
take a look at the last line of code on this page for me if you would all be so kind
http://th3rrc.com/videodump/
the line is generated by php after grabbing the videos and their titles from a mysql database with this code

echo "<table><tr><td class=\\"text\\"><strong><p>".$row["text"]."</p></strong></td></tr>"."<tr><td class=\\"vid\\">"."<iframe title=\\"YouTube video player\\" src=\\"http://www.youtube.com/embed/".$row[link]."\\" width=\\"426\\" height=\\"240\\" frameborder=\\"0\\"></iframe>"."</td></tr></table>";

as you can see i thought that if i put a bunch of <table>s in a <p>aragraph, it would display this way, but it is not
the videos have to be in tables because they have to have titles
also, the titles are not displaying anymore, they were when i was using another format
i wanted it to all work like a paragraph so that the number of videos being displayed from left to right would be dependent on the width of the window, otherwise i would just use a <table> of <table>s
thanks for all the help over the years guys, i hope we can tackle this one too

2

I don’t see what having titles has to do with using tables. You mean a title above or below the video right?

Anyway, using tables, your code would want to be something like this:


<table>
<tr>
	<td>
    	<h1><strong>$row['text']</strong></h1>
        <iframe title=\\"YouTube video player\\" src=\\"http://www.youtube.com/embed/\\" . $row['link'] . "\\" width=\\"426\\" height=\\"240\\" frameborder=\\"0\\"></iframe>
    </td>
	<td>
    	<h1><strong>$row['text']</strong></h1>
        <iframe title=\\"YouTube video player\\" src=\\"http://www.youtube.com/embed/\\" . $row['link'] . "\\" width=\\"426\\" height=\\"240\\" frameborder=\\"0\\"></iframe>
    </td>
</tr>

<tr>
	<td>
    	<h1><strong>$row['text']</strong></h1>
        <iframe title=\\"YouTube video player\\" src=\\"http://www.youtube.com/embed/\\" . $row['link'] . "\\" width=\\"426\\" height=\\"240\\" frameborder=\\"0\\"></iframe>
    </td>
	<td>
    	<h1><strong>$row['text']</strong></h1>
        <iframe title=\\"YouTube video player\\" src=\\"http://www.youtube.com/embed/\\" . $row['link'] . "\\" width=\\"426\\" height=\\"240\\" frameborder=\\"0\\"></iframe>
    </td>
</tr>
</table>

Now, I’ve put your title and video together in the cell (<td>). The important thing to note is how the table itself is structured.

In your code you are starting and closing a new row (<tr> and </tr>) for each video, so one video per row. If you wanted two videos per row, you would have two columns <td> … video … </td> <td> … video … </td> per row.

BUT, you do not want to be using tables, tables are not for layouts.

Instead you would do something like this with DIV’s and CSS:

HTML:


<div class="videocell">
	<h1>6 flag caps in 1 game!!</h1>
    <iframe title="YouTube video player" src="http://www.youtube.com/embed/uAXCD8l6qQY" width="426" height="240" frameborder="0"></iframe>
</div>

<div class="videocell">
	<h1>OUCH!!</h1>
    <iframe title="YouTube video player" src="http://www.youtube.com/embed/7v4PoBEIQ88" width="426" height="240" frameborder="0"></iframe>
</div>

<div class="videocell">
	<h1>ILL FIGHT!!</h1>
    <iframe title="YouTube video player" src="http://www.youtube.com/embed/xZuEKLsOACU" width="426" height="240" frameborder="0"></iframe>
</div>

<div class="videocell">
	<h1>great video</h1>
    <iframe title="YouTube video player" src="http://www.youtube.com/embed/NBF67np5FGk" width="426" height="240" frameborder="0"></iframe>
</div>

CSS:


.videocell
{
	width: 426px;
	float: left;
	margin: 10px 5px 0px 5px;
}


.videocell h1
{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: bold;
}

iframe
{
	float: left;
}

That will place each video next to each other within the allotted space. So if there is room for 3 videos side by side and you have 6 videos, you’ll have 2 rows of 3 videos.

If there is room for 2 side by side and 6 videos, you will have 3 rows of 2 videos.

Now if you wanted to enforce the width, so you can only have 2 videos side by side no matter what the users screen resolution is, you would nest them in a wrapper.

HTML:


<div class="wrapper">
	<div class="videocell">
		<h1>6 flag caps in 1 game!!</h1>
    	<iframe title="YouTube video player" src="http://www.youtube.com/embed/uAXCD8l6qQY" width="426" height="240" frameborder="0"></iframe>
	</div>

	<div class="videocell">
		<h1>OUCH!!</h1>
	    <iframe title="YouTube video player" src="http://www.youtube.com/embed/7v4PoBEIQ88" width="426" height="240" frameborder="0"></iframe>
	</div>

	<div class="videocell">
		<h1>ILL FIGHT!!</h1>
	    <iframe title="YouTube video player" src="http://www.youtube.com/embed/xZuEKLsOACU" width="426" height="240" frameborder="0"></iframe>
	</div>

	<div class="videocell">
		<h1>great video</h1>
	    <iframe title="YouTube video player" src="http://www.youtube.com/embed/NBF67np5FGk" width="426" height="240" frameborder="0"></iframe>
	</div>
</div>

CSS:


.wrapper
{
	width: 872px;
}


.videocell
{
	width: 426px;
	float: left;
	margin: 10px 5px 0px 5px;
}


.videocell h1
{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: bold;
}

iframe
{
	float: left;
}

The width of the wrapper will need to account for the width of each cell (as in the iframe) and any padding/margin inside of / between each cell (DIV). I put 5px margin each side of the “videocell” DIV, so you have 10px margin total per cell, so each cell is the width of the iframe + 10px .

3

you know ive asked a lot of questions on the internet and i have never seen a longer or more complete answer lol
thank you for your hard work sir

4

i fixed part of it, not using tables or paragraphs anymore, im using divs with css float property, but the titles still arent showing up, can anyone tell me why please? they’re in the html check out the bottom line of the html here again for me please help me out this is so wierd
http://th3rrc.com/videodump/

5

@chopficaro

if you define the following in your css:


#paragraph h1 { 
position: relative;
... other styles;
}

It fixes the titles. You should also think about putting a contrasting background color in this same css style to make the titles more readable.

Also you can target all the ‘videocells’ like:


#paragraph div { ... }
and
#paragraph div iframe { ... }

And then get rid of the videocell class on each of the divs.

Steve

6

Thanks for you help guys, the site looks great now
http://th3rrc.com/