I am a beginner with HTML and I am trying to make a table layout. So far I have done the table rows, height, data etc. What I cant figure out is something like the six squares up on top (home, about me, product etc.) from the pictures. Any help would be appreciated.
Here is the code I have so far:
<!DOCTYPE HTML>
<html>
<head>
<title>WEB PAGE TITLE GOES HERE</title>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0">
<tr>
<!-- ============ HEADER SECTION ============== -->
<td colspan="3" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr>
<tr>
<!-- ============ LEFT COLUMN (MENU) ============== -->
<td width="20%" valign="top" bgcolor="#999f8e">
Menu link<br>
Menu link<br>
Menu link<br>
Menu link<br>
Menu link
</td>
<!-- ============ MIDDLE COLUMN (CONTENT) ============== -->
<td width="55%" valign="top" bgcolor="#d2d8c7">
</td>
<td width="25%" valign="top" bgcolor="#999f8e"> </td>
</tr>
<!-- ============ FOOTER SECTION ============== -->
<tr><td colspan="3" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr>
</table>
</body>
<html>
Welcome to Stack.
First of all, I STRONGLY advice you to waste some time and learn Bootstrap, table layouts are old fashionend and they're hard to apply maintenance.
table .menu div{
background: yellow;
color: blue;
display: block;
float: left;
width: 14.66666666666667%;
margin: 1%;
padding: 1px;
border: solid 4px blue;
box-sizing: border-box;
text-align: center;
}
I've developed this Code Pen showing how to create that kind of floating elements that you're seeking, but I've used some css styles (and I advice you to learn it too, It's extremely important nowadays).
Call me inbox if you want some tips or links to study :)
This will do the trick for the menu nav in a flexible layout.
HTML File:
<!DOCTYPE html>
<html>
<head>
<title>Menu Demo</title>
<link rel="Stylesheet" href="style.css">
</head>
<body>
<div id="container">
<nav>
<span class=menu_item>Home</span>
<span class=menu_item>About me</span>
<span class=menu_item>Product</span>
<span class=menu_item>Services</span>
<span class=menu_item>Maps</span>
<span class=menu_item>Contact me</span>
</nav>
</div>
</body>
</html>
CSS File:
body
{
font-size: 100%;
padding: 0;
border: 0;
margin: 0;
}
nav
{
display: flex;
width: 100%;
flex-flow: row nowrap;
justify-content: space-around;
background-color: cyan;
padding: 0 10px 30px 0;
}
.menu_item
{
font-size: 1em;
border: 3px solid blue;
color: blue;
margin: 3px;
min-height: 2.5em;
width: 14%;
text-align: center;
text-decoration: underline;
background-color: yellow;
}
#container
{
}
~Pat
This is how you would literally do what you are trying to accomplish (creating a tabular format of your website). I'd recommend you spend some time learning bootstrap though and building a proper navbar and a responsive webpage. It will serve you better than working on html tables.
<table class="table table-hover">
<thead>
<tr>
<td>Home</td>
<td>About Me</td>
<td>Product</td>
<td>Services</td>
<td>Maps</td>
<td>Contact Me</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">This area will contain the Local Navigation</td>
<td colspan="2">This area will contain information about me</td>
<td colspan="2">This area will contain statistics of customer satisfaction</td>
</tr>
</tbody>
</table>
Related
I am trying to create a profile box where the user would be able to see his own profile picture, and other account specific information and utilities, like their username, settings button, profile page button, etc. The way I went about doing this was with a table element centered using flex. Then, I colored the backgrounds of my divs to see what they are doing. I noticed white lines between the cells of my table, tried some things, did some research, found the border-collapse attribute, and used it. Problem is, only some of my lines went away, as shown in the picture below. Weirder enough, it seems to disappear when I zoom in and out using ctrl + scroll. My guess is that it's some sort of rounding error.
What to do?
.Leftside2 {
flex: 20%;
background-color: red;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.profile {
width: 90%;
border: 2px solid black;
display: flex;
justify-content: center;
border-collapse: collapse;
}
#profile_picture {
height: 100%;
padding: 5px;
background-color: orange;
display: flex;
justify-content: center;
}
#profile_picture img {
width: 80%;
height: 80%;
}
.friend_list {
width: 90%;
}
<div class="Leftside2">
<table class="profile">
<tr>
<td style="height: 30vh;border-width: 0px">
<div id="profile_picture"><img src="https://via.placeholder.com/450x400"></div>
</td>
</tr>
<tr>
<td style="border: 0 solid black; background-color: orange">Jill</td>
</tr>
<tr>
<td style="border-width: 0px">Eve</td>
</tr>
<tr>
<td style="border-width: 0px">John</td>
</tr>
</table>
<table class="friend_list">
<tr>
<td>Friends List</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
</div>
Edit: I tried putting cellpadding="0" and cellspacing="0" inside my and it didn't work. I also tried to explicitly state that margin = 0, padding = 0 in all table elements. I do not think that it's a margin/padding issue, as many have suggested below.
Edited code:
.profile {
width: 90%;
border: 2px solid black;
display: flex;
justify-content: center;
border-collapse: collapse;
padding: 0;
margin: 0;
}
.profile td {
padding: 0;
margin: 0;
}
Second edit:
<html lang = "en">
<head>
<link rel="stylesheet" href="../css/style.css">
<title>Find a Friend</title>
</head>
<body>
<div class="HeaderMenu">
<div style="margin-left:40px;margin-right:100px;background-color: #008aed;">
<button class="logout_button">Logout</button>
</div>
</div>
<div class="row">
<div class = "left_space"></div>
<div class="Leftside2">
<table class="profile" cellpadding="0" cellspacing="0">
<tr>
<td style="height: 30vh;border-width: 0px">
<div id="profile_picture"><img src="../img/placeholder.png"></div>
</td>
</tr>
<tr>
<td style="border: 0 solid black; background-color: orange">Jill</td>
</tr>
<tr>
<td style="border-width: 0px">Eve</td>
</tr>
<tr>
<td style="border-width: 0px">John</td>
</tr>
</table>
<table class="friend_list">
<tr>
<td>Friends List</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
</div>
<div class="Centerside2">
</div>
<div class="Rightside2">
</div>
<div class = "right_space"></div>
</div>
</body>
.profile td {
padding: 0;
}
adding this to your css should solve the problem. or you can add cellpadding="0" in your html table tag.
just adding attribute cellpadding="0" in your table tag will fix your issue.
Try adding this to your table tag:
cellspacing=“0”
Padding refers to the space inside the cell. Cell spacing is about how much space there is outside it.
I have an HTML table with lots of cells in it. Some of these cells should be flagged as warning, others as alert.
I have come up with the following HTML/CSS to do something like this.
<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 12px;
color: #fff;
line-height: 16px;
text-align: center;
background: #ff0000;
float: right;
}
</style>
</head>
<body>
<table border=1 cellpadding=0 style="border-collapse: collapse;">
<tr>
<td width=150 height=30>hello
<div class='circle'>I</div>
</td>
</tr>
</table>
</body>
</html>
Which displays the text like...
However, I want it to display with the little flag immediately to the right of the text, like this...
If I change the CSS to specify float: left; this then displays the flag before the text.
The reason I want it aligned to the right of the text, is that depending on the width of the column, it might not be obvious which text is being flagged.
ps. I've included the td width/height just so that I can demonstrate what I'm trying to do, there's also no table borders in my final design.
You can avoid making your circle narrow by using display:inline-block; and remove the float all together.
<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 12px;
color: #fff;
line-height: 16px;
text-align: center;
background: #ff0000;
display: inline-block;
}
</style>
</head>
<body>
<table border=1 cellpadding=0 style="border-collapse: collapse;">
<tr>
<td width=150 height=30>hello
<div class='circle'>I</div>
</td>
</tr>
</table>
</body>
</html>
The primary difference between a <div> and a <span> is how they affect the layout.
A <div>, by default, is a block element and wants to live on its own line.
A <span>, by default, is a inline element and will sit next to the element before and after it.
Changing to a <span> and getting rid of the float will solve the problem. Though you do need to set its display value to something like inline-block to allow the width and height values to work correctly.
<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
display: inline-block;
font-size: 12px;
color: #fff;
line-height: 16px;
text-align: center;
background: #ff0000;
}
</style>
</head>
<body>
<table border=1 cellpadding=0 style="border-collapse: collapse;">
<tr>
<td width=150 height=30>hello
<span class='circle'>I</span>
</td>
</tr>
</table>
</body>
</html>
Please make Couple of adjustments to your code:
Change:
hello
To:
<div style="float:left;">hello</div>
And In CSS
Change:
float:right;
To
float: left;
<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 12px;
color: #fff;
line-height: 16px;
text-align: center;
background: #ff0000;
float: left;
}
</style>
</head>
<body>
<table border=1 cellpadding=0 style="border-collapse: collapse;">
<tr>
<td width=150 height=30><div style="float:left;">hello</div>
<div class='circle'>I</div>
</td>
</tr>
</table>
</body>
</html>
I can't get my two tables to align next to each other. The second blue box (of smaller boxes) keeps sitting below the first box. I've tried using "display: inline-block" and "float: left" on every single element, but nothing happens. Please help?
#zero-data {
border: 1px solid black;
height: 200px;
width: 200px;
text-align: center;
}
#table-12 tr {
display: inline-block;
}
.data-1234 {
border: 1px solid blue;
width: 95px;
height: 95px;
text-align: center;
}
#table-34 tr {
display: inline-block;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Problem.css">
</head>
<body>
<!-- big table -->
<table id="zero-table">
<tr id="zero-row">
<td id="zero-data">0</td>
</tr>
</table>
<!-- tables 1 & 2 -->
<table id="table-12">
<tr id="row-1">
<td class="data-1234">1</td>
</tr>
<tr id="row-2">
<td class="data-1234">2</td>
</tr>
</table>
<!-- tables 3 & 4 -->
<table id="table-34">
<tr id="row-3">
<td class="data-1234">3</td>
</tr>
<tr id="row-4">
<td class="data-1234">4</td>
</tr>
</table>
</body>
</html>
Like this?
.wrapper {
background-color: red;
}
#zero-table,
#table-12,
#table-34 {
float: left;
}
#zero-data {
border: 1px solid black;
height: 200px;
width: 200px;
text-align: center;
}
.data-1234 {
border: 1px solid blue;
width: 95px;
height: 95px;
text-align: center;
}
<div class="wrapper">
<table id="zero-table">
<tr id="zero-row">
<td id="zero-data">0</td>
</tr>
</table>
<table id="table-12">
<tr id="row-1">
<td class="data-1234">1</td>
</tr>
<tr id="row-2">
<td class="data-1234">2</td>
</tr>
</table>
<table id="table-34">
<tr id="row-3">
<td class="data-1234">3</td>
</tr>
<tr id="row-4">
<td class="data-1234">4</td>
</tr>
</table>
</div>
Give ghost columns a try. Place it between each of the tables.
<!-- your table -->
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="150" align="left" valign="top">
<![endif]-->
<!-- your table -->
Once you place it in the tables should start aligning properly. Change the width of the TD to whatever it's supposed to be in your code. Let me know you go.
No need to add Float to every element. Since you want the second and third tables to appear beside the first table, you just add Float to that first table:
#zero-table { float: left; }
See JSFiddle
I'm trying to replicate the design and structure of a Facebook page post.
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
a {
color: #365899;
cursor: pointer;
text-decoration: none;
}
.post td {
vertical-align: top;
}
.timestamp {
font-size: 13px;
color: #999;
}
<div class="post">
<table>
<tbody>
<tr>
<td>
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</td>
<td>
<table>
<tr>
<td>
<strong><a>Toomblr</a></strong>
</td>
</tr>
<tr class="timestamp">
<td>
20/01/2017 - 11:43
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Some content.
</td>
</tr>
</tbody>
</table>
</div>
Here is the JSFiddle of what I have: https://jsfiddle.net/6nodfbdj/
As you can see, the image is only 50x50, but it's pushing the td all the way out like that for no reason.
Somehow it's conflicting with the td that contains the content. So basically what's happening, is whatever the width of the content td is, is also being set for the td containing the image.
Any ideas?
As mentioned in one of the comments, tables are not to be used for formatting. They are for tabular data.
From The w3.org site
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
Note. This specification includes more detailed information about tables in sections on
https://www.w3.org/TR/html401/appendix/notes.html#notes-tables
Instead you should use CSS. While the layout and sizes aren't exactly the same as your fiddle, take a look at https://jsfiddle.net/ringhidb/jeeu2yrt/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 16px;
}
a {
color: #365899;
cursor: pointer;
text-decoration: none;
}
.post {
position: absolute;
}
.header {}
.logo {
float: left;
padding: .1em;
}
.info {
float: left;
padding: .25em;
}
.site {
font-size: 1.02em;
font-weight: bold;
}
.timestamp {
font-size: .75em;
color: #999;
}
.content {
clear: both;
}
</style>
<title>CSS Layout</title>
</head>
<body>
<div class="post">
<div class="header">
<div class="logo">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</div>
<div class="info">
<a class="site">Toomblr</a>
<div class="timestamp">20/01/2017 - 11:43</div>
</div>
</div>
<div class="content">
Some content.
</div>
</div>
</body>
</html>
It's being set by the width of the text in the <td> containing "Some content". Try:
<td colspan=2>
Some content.
</td>
I don't know what you want to do, but try this.
.post td {
vertical-align:top;
float:left;
}
You had a "spare cell" what can be fixed with rowspan and colspan.
Try this:
<body>
<div class="post">
<table>
<tbody>
<tr>
<td rowspan=2>
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</td>
<td>
<strong><a>Toomblr</a></strong>
</td>
</tr>
<tr class="timestamp">
<td>
20/01/2017 - 11:43
</td></tr>
<tr>
<td colspan=2>
Some content.
</td>
</tr>
</tbody>
</table>
</div>
</body>
have you tried image width 100% ?
Float:right specified for a div inside a table cell seems to have no effect in IE. I have also tried text-align right, among other things, to align the layer contents to the right, but without success in IE 7.
CSS snippet:
.workloadcell {
background-color: #E6D7E9;
padding: 0px;
width: 14px;
height: 16px;
text-align: right;
}
div.workload {
background-color: #E6D7E9;
text-align: right;
width: 14px;
float: right;
}
HTML snippet:
<td class="workloadcell">
<div class="workload">
1
</div>
</td>
Both the HTML and the CSS validate, and in Firefox the text aligns right, as it should. If you want to test the complete code by copy/pasting it, it's here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>Table Test</title>
<style type="text/css">
td {
border: 1px solid black;
}
.workloadcell {
background-color: #E6D7E9;
padding: 0px;
width: 14px;
height: 16px;
text-align: right;
}
div.workload {
background-color: #E6D7E9;
text-align: right;
width: 14px;
float: right;
}
</style>
</head>
<body>
<table>
<tr>
<td>
</td>
<td colspan="4">
<div>
2008
</div>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div>
Q1
</div>
</td>
<td>
<div>
Q2
</div>
</td>
<td>
<div>
Q3
</div>
</td>
<td>
<div>
Q4
</div>
</td>
</tr>
<tr>
<td>
workload forecast
</td>
<td class="workloadcell">
<div class="workload">
1
</div>
</td>
<td class="workloadcell">
<div class="workload">
2
</div>
</td>
<td class="workloadcell">
<div class="workload">
2
</div>
</td>
<td class="workloadcell">
<div class="workload">
2
</div>
</td>
</tr>
<tr>
<td>
actual workload
</td>
<td class="workloadcell">
<div class="workload">
3
</div>
</td>
<td class="workloadcell">
<div class="workload">
3
</div>
</td>
<td class="workloadcell">
<div class="workload">
2
</div>
</td>
<td class="workloadcell">
<div class="workload">
3
</div>
</td>
</tr>
</table>
</body>
</html>
(I know that the CSS is are not optimal in the sense that the class declarations are repeated for several elements, but please don't comment on this, if it is not relevant to the problem.)
It should work the way you have it (or the way alexmeia suggests).
But, (this being IE), the headers Q1, Q2, etc. are pushing the table columns wider than the 14 px you've requested.
The columns are right justified within the 14px you've defined, but the divs are not moving to the right in IE. (The div is staying within the 14px defined for it even though the column is actually wider than 14px)
To illustrate this, you can either make the width say 28px or change the color of one of the backgrounds to demonstrate the difference between the td and the div within in.
.workloadcell {
background-color: #E6D7E9;
padding: 0px;
width: 14px;
height: 16px;
text-align: right;
}
div.workload {
background-color: #E6EEE9;
text-align: right;
width: 14px;
float: right;
}
The solution for IE is to either not define a width or to make it wide enough to accomodate the header.
You don't need to declare rules for the div.workload.
Use only this rules and everything will work fine:
td {
border: 1px solid black;
}
.workloadcell {
background-color: #E6D7E9;
padding: 0px;
width: 20px;
height: 16px;
text-align: right;
}
It's worth noting, that IE, especially v6 on pre SP1 XP, and older windows has serious rendering issues when you intermingle tables within divs, and divs within those tables. Once you exceed a certain complexity & nesting you may get a blank/white page.
If your needing to right-align text content in certain cells, I would suggest adding an additional class declaration to the td tag, not nesting a div. I would also suggest trying in IE8, and see if the issue persists. You didn't mention which versions you need to support.