Thread: Table Constraints - Script within table.

Hello! I have to make this brief but when i get back home i WILL add to it.

I am building a slideshow with a timer function - to display a score board with pictures. The timer counts down from 15 minutes (5 min for test) and every 15 minutes the game type changes on the board, displaying the current type and the next game type. These individual elements are in a table, side by side. The problem is titles of the elements expand the tables and prevent them from staying aligned and contained.

So the way it works, is each slide is in its own Div, each div has its own two row table. Row 1 displays Image 1 (Game 1) and row 2 shows game 2 (the next match type). Each individual slide, is a individual table. So each table, needs constraints to proportion the center before i start decorating.

Any advice to clean it up as well before adding visuals would be great as well - as Im super new to raw coding stuff like this.

The test site is: http://score.track21houston.com/test.html

the //comments i am aware are nto real comment threads, but are there for me to visually see some things that helps me stay organized and display whats going on to the person Im building this for. I was doing this originally in worpdress, but there was nothing in WP for me to create the repeating timer. Boo. Haha. Let me know if this is not sufficient information

[code]
//slideshow start
<tr>
<td>
<style>
.mySlides {display:none;}
</style>
<center>
<h2 class="w3-center">NEXT GAME TYPE</h2>

<div class="w3-content" style="max-width:400px">

<div class="mySlides">
<center>
<table style="width:100%">
<td><h1><b>AMBUSH</b></h1>
<img src="http://score.track21houston.com/images/ambush.png" alt="ambush" align="center">
<p> GAME DESCRIPTION </p>
</center>
</td>


<center>
<td><h1><i>WEDLOCK</i></h1>
<img src="http://score.track21houston.com/images/wedlock.png" alt="wedlock">
<p> GAME DESCRIPTION </p>
</center>
</td>
</table>
</div>


<div class="mySlides">
<center>
<table style="width:100%">
<td><h1><b>WEDLOCK</b></h1>
<img src="http://score.track21houston.com/images/wedlock.png" alt="wedlock" align="center">
<p> GAME DESCRIPTION </p>
</center>
</td>


<center>
<td><h1><i>ASSASSINATION</i></h1>
<img src="http://score.track21houston.com/images/assassination.png" alt="assassination">
<p> GAME DESCRIPTION </p>
</center>
</td>
</table>
</div>


<div class="mySlides">
<center>
<table style="width:100%">
<td><h1><b>ASSASSINATION</b></h1>
<img src="http://score.track21houston.com/images/assassination.png" alt="ambush" align="center">
<p> GAME DESCRIPTION </p>
</center>
</td>


<center>
<td><h1><i>BIRTHRIGHT</i></h1>
<img src="http://score.track21houston.com/images/birthright.png" alt="ambush">
<p> GAME DESCRIPTION </p>
</center>
</td>
</table>
</div>
[code]

Wow i just goofed that up hard, and i cant edit the thread.

Code:

//slideshow start
<tr>
<td>
<style>
.mySlides {display:none;}
</style>
<center>
<h2 class="w3-center">NEXT GAME TYPE</h2>

<div class="w3-content" style="max-width:400px">

<div class="mySlides">
<center>
<table style="width:100%">
<td><h1><b>AMBUSH</b></h1>
<img src="http://score.track21houston.com/images/ambush.png" alt="ambush" align="center">
<p> GAME DESCRIPTION </p>
</center>
</td>


<center>
<td><h1><i>WEDLOCK</i></h1>
<img src="http://score.track21houston.com/images/wedlock.png" alt="wedlock">
<p> GAME DESCRIPTION </p>
</center>
</td>
</table>
</div>


<div class="mySlides">
<center>
<table style="width:100%">
<td><h1><b>WEDLOCK</b></h1>
<img src="http://score.track21houston.com/images/wedlock.png" alt="wedlock" align="center">
<p> GAME DESCRIPTION </p>
</center>
</td>


<center>
<td><h1><i>ASSASSINATION</i></h1>
<img src="http://score.track21houston.com/images/assassination.png" alt="assassination">
<p> GAME DESCRIPTION </p>
</center>
</td>
</table>
</div>


<div class="mySlides">
<center>
<table style="width:100%">
<td><h1><b>ASSASSINATION</b></h1>
<img src="http://score.track21houston.com/images/assassination.png" alt="ambush" align="center">
<p> GAME DESCRIPTION </p>
</center>
</td>


<center>
<td><h1><i>BIRTHRIGHT</i></h1>
<img src="http://score.track21houston.com/images/birthright.png" alt="ambush">
<p> GAME DESCRIPTION </p>
</center>
</td>
</table>
</div>