Need Help With HTML5 Tables

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
PHPHelpNeeded
Forum Commoner
Posts: 83
Joined: Mon Nov 17, 2014 8:03 pm

Need Help With HTML5 Tables

Post 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.
Attachments
chess_editor_dashboard_outline.jpg
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Need Help With HTML5 Tables

Post 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>
PHPHelpNeeded
Forum Commoner
Posts: 83
Joined: Mon Nov 17, 2014 8:03 pm

Re: Need Help With HTML5 Tables

Post by PHPHelpNeeded »

thank you.

Is that what you call CSS style sheets?
PHPHelpNeeded
Forum Commoner
Posts: 83
Joined: Mon Nov 17, 2014 8:03 pm

Re: Need Help With HTML5 Tables

Post 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?
PHPHelpNeeded
Forum Commoner
Posts: 83
Joined: Mon Nov 17, 2014 8:03 pm

Re: Need Help With HTML5 Tables

Post 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.
Post Reply