Page 1 of 1

Need Help With HTML5 Tables

Posted: Wed Nov 26, 2014 10:13 am
by PHPHelpNeeded
Hi,

I need someone to look at this image

Image

And please help write a table in HTML5 that would have cells in the same way you see on image, or does it require FRAMEs instead.

If either tables or frames, can someone write an HTML code to build the box areas you see on the image?

Any suggestion or helpful comment will be great.

Thanks.

Re: Need Help With HTML5 Tables

Posted: Wed Nov 26, 2014 10:56 am
by Celauran
Don't use tables for layout. I believe you're looking for something like this.

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DN</title>
	<style>
	header, footer, div {
		border: 1px solid #CCC;
	}
	.wrap {
		border: none;
	}
	.left-sidebar {
		box-sizing: border-box;
		float: left;
		width: 15%;
	}
	.content {
		box-sizing: border-box;
		width: 70%;
		display: inline-block;
	}
	.right-sidebar {
		box-sizing: border-box;
		float: right;
		width: 15%;
	}
	footer {
		clear: both;
	}
	</style>
</head>
<body>
	<header>Box 1</header>
	<div class="wrap">
		<div class="left-sidebar">Box 2</div>
		<div class="content">Box 3</div>
		<div class="right-sidebar">Box 4</div>
	</div>
	<footer>Box 5</footer>
</body>
</html>

Re: Need Help With HTML5 Tables

Posted: Wed Nov 26, 2014 11:13 am
by PHPHelpNeeded
thank you.

Is that what you call CSS style sheets?

Re: Need Help With HTML5 Tables

Posted: Wed Nov 26, 2014 11:27 am
by PHPHelpNeeded
I changed the code a little to get the desired effect.

But thanks.

Code: Select all

 <html>
	<head>
         <style>
	         header, footer, div {
	                 border: 1px solid #CCC;
	        }
	        .wrap {
	                 border: none;
	        }
	        .top-bar {
	         	box-sizing: border-box;
	         	float: center;
                 width: 100%;
                 height: 15%;
	        }
	        .left-sidebar {
	                 box-sizing: border-box;
	                 float: left;
	                 width: 20%;
	                 height: 65%;
			}
	        .content {
	                 box-sizing: border-box;
	                 width: 60%;
	                 height: 65%;
	                 display: inline-block;
	        }
	        .right-sidebar {
	                 box-sizing: border-box;
	                 float: right;
	                 width: 20%;
	                 height: 65%;
			}
	        .bottom-bar {
	         	box-sizing: border-box;
	         	float: center;
                 width: 100%;
                 height: 20%;
	        }
	        footer {
	                 clear: both;
	        }
         </style>
	</head>
	<BODY>
	    <div class="top-bar">Box 1</div>
        <div class="wrap">
         	<div class="left-sidebar">Box 2</div>
            <div class="content">Box 3</div>
        	<div class="right-sidebar">Box 4</div>
        </div>
		<div class="bottom-bar">Box 4</div>
	
		<?php
		
		?>

	</BODY>
</HTML>
Note: I couldn't find the correct syntax to show it as a HTML format, any help on that?

Re: Need Help With HTML5 Tables

Posted: Wed Nov 26, 2014 11:45 am
by PHPHelpNeeded
I have to say, STYLE sheet has changed my mind.

I just started doing php and html, I guess now I will go buy a book on CSS style sheets.

But now I found the proper effect, I used IFRAMEs.

Since each section will have relay information back to the socket server CLI program and according to all bunch of information, including like user, and game ID, will be relayed back and forth so that the server program can update the MySQL tables and game statics, etc.

But thank you so much, if it wasn't for you I couldn't had found the solution.