I just want to put the table in the middle of the page. Any help would be great.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Randy's first html web page !</title>
<style type="text/css">
body
{background-image:url('Koala.gif');}
h1
{
text-align:center;
}
h2
{
text-align:center;
}
p
{
text-align:center;
font-size:200%;
color:#00fff0;
}
div
{
background-color:#efffff;
}
</style>
</head>
<h1> Hello Professor</h1>
<h2> By: Randy White</h2>
<P> I haven't done anything like this before.</P>
<P>Seems to be ok</P>
<P><img src="Hydrangeas.jpg" width="150" height="100" alt="Hydrangeas.jpg"></P>
<table border="1">
<tr>
<th>Month</th>
<th>Day</th>
<th>Year</th>
</tr>
<tr>
<td>December</td>
<td>1</td>
<td>2010</td>
</tr>
</table>
Visit Google!
</body>
</html>
Try:
table {
width: 50%;
margin-left: auto;
margin-right: auto;
}
or:
table {
width: 200px;
margin-left: auto;
margin-right: auto;
}
BTW, this sets this for all tables. You might want to have the properties on a more specific selector (like table.someclass).
old style is align="center":
<table width="400" border="0" cellspacing="0" cellpadding="0" align="center">
To horizontally align table in the middle of the page, and also make table width fit itself automatically, try below:
table {
width: auto;
margin-left: auto;
margin-right: auto;
}
Related
I would like to create some text like this.
I used this code, but it didn't work:
woman <span style="padding-left:40px"> TextTextTextText</span> <br>
Man <span style="padding-left:40px"> TextTextTextText</span>
What should I use instead?
<style>
table {
border: 0;
border-collapse: collapse;
}
.pl-40 {
padding-left: 40px;
}
</style>
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td>Woman</td>
<td class="pl-40">TextTextTextText</td>
</tr>
<tr>
<td>Man</td>
<td class="pl-40">TextTextTextText</td>
</tr>
</table>
</body>
</html>
You might want to use a table:
.left {
text-align: left;
}
.right {
text-align: right;
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table>
<tbody>
<tr>
<td class="left">Woman</td>
<td class="right">TextTextTextTop</td>
</tr>
<tr>
<td class="left">Man</td>
<td class="right">TextTextTextBottom</td>
</tr>
</tbody>
</table>
</body>
</html>
If you want some more space between them, then you can add padding-right: 40px; to the .left declaration in the CSS:
.left {
text-align: left;
padding-right: 40px;
}
As Prem Signh said in his answer, you can hide the border with <table style="border: 0; border-collapse: collapse;"> instead of <table>.
Try using something like this:
.left {
display: inline-block;
width: 50px;
}
.right {
padding-left: 40px;
}
<div>
<span class="left">woman</span>
<span class="right">TextTextTextText</span>
</div>
<div>
<span class="left">Man</span>
<span class="right">TextTextTextText</span>
</div>
I am trying to find a way to make a cell transparent or semi-transparent. The below code should work but doesn't:
<html>
<style>
op {
opacity:0.3;
filter:alpha(opacity:30)
}
</style>
<body background="background.jpg" style="background: black;">
<table border="1" width="100%" height="222">
<tr>
<td class="op" bgcolor="#FFFFFF" height="216"> </td>
</tr>
</table>
</body></html>
You haven't properly defined the CSS class, class definition must begin with a dot, in your case .op.
Also, your are mixing CSS and HTML attributes, you should only only CSS (note that definitions for HTML tags don't start with a dot):
<html>
<style>
body {
background-image: background.jpg;
background-color: black; /* for testing without the image*/
}
table {
border: 1px;
width: 100%;
height: 222px;
}
td {
height: 216px;
}
.op {
opacity:0.3;
filter:alpha(opacity:30);
background-color: #FFFFFF;
}
</style>
<body>
<table>
<tr>
<td class="op"> </td>
</tr>
</table>
</body></html>
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>
I'm getting a 2px unwanted margin/padding/border, but can't for the life of me see what's causing it. It comes out the same way in both FF47 and O 36.0.2130.80
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<style>
HEAD,BODY,TABLE,TBODY,TR,TH,TD,DIV {
padding:0;
margin:0;
border:0;
}
BODY {
background-color:#555577;
color:#CCCCCC;
font-family:"Verdana","Arial","Helvetica";
font-size:9pt;
text-decoration:none;
border:0;
padding:0;
margin:auto ;
}
</style>
</head>
<body>
<table width="400" style="background-color:white;margin:auto;padding:0;border:0">
<tr>
<td>
<table width=200 style="background-color:#780000;color:white;padding;0;border:0;">
<tr>
<td>FOO</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Add
border-spacing: 0px;
To the table.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<style>
HEAD,BODY,TABLE,TBODY,TR,TH,TD,DIV {
padding:0;
margin:0;
border:0;
border-spacing: 0px;
}
BODY {
background-color:#555577;
color:#CCCCCC;
font-family:"Verdana","Arial","Helvetica";
font-size:9pt;
text-decoration:none;
border:0;
padding:0;
margin:auto ;
}
</style>
</head>
<body>
<table><tr><td height="50"></td></tr></table>
<table width="400" style="background-color:white;margin:auto;padding:0;border:0">
<tr>
<td>
<table width=200 style="background-color:#780000;color:white;padding;0;border:0;">
<tr>
<td>FOO</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
https://jsfiddle.net/
Add "border-collapse: collapse;" to your table element, you can see a pic here:
You can archieve your goal more clean and professional using divs instead tables:
BODY {
background-color:#555577;
}
#progress-containes {
margin-top: 50px;
width : 400px;
height: 30px;
background-color: #fff;
}
#progress-bar {
background-color:#780000;
font: 400 9pt/1 "Verdana","Arial","Helvetica";
width: 50%;
color: #fff;
padding-top: 8px;
padding-left: 6px;
box-sizing: border-box;
height: 100%;
}
<div id="progress-containes">
<div id="progress-bar">
FOO
</div>
</div>
I Have Problem with Headers And Footer on web page Which is Going to Print. My custom headers and footer should print on each page. Header is printing at top of page, that is fine, but footer is not printing at bottom of page if the content is less on page. footer is printing depends on content.
HERE MY CODE IS:-
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<link rel='stylesheet' type='text/css' href='print.css' media='print'>
<title></title>
</head>
<body>
<table border="0" align="center" width="100%">
<thead>
<tr>
<th align="center" width="100%">
<font size="5" color="black"><strong>HEADER HERE</strong></font>
</th>
</tr>
</thead>
<tfoot>
<tr>
<td align="center" width="100%">
<font size="4" color="black"><strong>FOOTER HERE</strong></font>
</td>
</tr>
</tfoot>
<tbody height="100%">
<tr>
<td width="100%">
CONTENT HERE
</td>
</tr>
</tbody>
</table>
</body>
</html>
MY CSS IS:-
.thead {
display: table-header-group;
}
.tfoot {
display: table-footer-group;
}
Can any one suggest me how to do it ? that would great help?
Since you have a print.css, write (only in print.css):
thead {
display: block;
position: fixed;
top: 0;
}
tfoot {
display: block;
position: fixed;
bottom: 0;
}
Depending on how much height your thead and tfoot might occupy, use an appropriate margin-top and margin-bottom on the table to avoid any overlap that might occur.
This is the code i use. Note I am setting both html and body height to 100% (needed for Chrome and Safari). Tested and works fine in IE9, FF, Chrome.
#media print {
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#footer {
position: absolute;
bottom: 0;
}
}