Copy link to clipboard
Copied
Hi Everyone; I'm fairly new to Dreamweaver but I know that does not excuse me from using a table on my website!! I'm using the latest CC 2018.
But I have used a 3 column table with the intention of holding the content together in a line - which it does perfectly.
I have wrapped the table in a div and then auto aligned the left and right margins of the div, this centres the table in dreamweaver but as soon as I open in browser the table is still left aligned.
Is there something I am missing? Any help would be appreciated.
What's in your Structure.css file?
I'm seeing a hodgepodge of css and html attribute styling. You really shouldn't do that unless you're making an html email. All of your styles should be handled by your css and then the html attributes should be removed to keep them from interfering with the css.
Copy link to clipboard
Copied
To stop a guessing game, it is best if you show your code.
Copy link to clipboard
Copied
There's really no need to wrap a table inside another container to center it. You can center a <table> the same way you center a <div> tag, by first setting a width that is less than 100%, and adding the margins...
.centered-table {
width:600px;
margin:0 auto;
}
<table class="centered-table">
<tr>
<td>Oh, hello there.</td>
</tr>
...
</table>
If you're uploading the page to your server and losing the centering there, it's possible you've forgotten to also upload your .css file where the centering is stored.
As Ben suggests, sharing your code will be the best way to get a quick and correct answer to your issue.
Copy link to clipboard
Copied
Hi guys, thank you for replying. I get the feeling it is a bit of a mess to be honest but here it is:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dashboard</title>
<style type="text/css">
@import url("Structure.css");
body {
background-image: url();
background-repeat: no-repeat;
background-color: #000000;
}
#wrapperdashboard {
display: block;
width: 960px;
margin-right: auto;
margin-left: auto;
border-color: #000000;
left: auto;
right: auto;
}
</style>
<link href="Structure.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__="dreamweaver"
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<script src="http://use.edgefonts.net/acme:n4:default.js" type="text/javascript"></script>
</head>
<body onLoad="MM_preloadImages('../Images/About Us 2.png')">
<div id="wrapperdashboard"><img src="../Images/IMG-20180216-WA0000.jpg" alt="" width="460" height="250" id="Title"/>
</div>
<div id="YouTube">
<div id="TableDiv">
<table width="960" border="0" margin="0" align="center">
<tbody>
<tr>
<td width="285"><div id="SoundCloud">Content for id "SoundClou
<iframe width="250" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/316090387&color=%23ff5500&au..."></iframe>
</div></td>
<td width="387"><div id="YouTube">Content for id "YouTube"
<iframe width="360" height="215" src="https://www.youtube.com/embed/rZ8gByOJgBU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div></td>
<td width="274" bgcolor="#000000"><div id="BioDiv">
<p style="font-size: 14px"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About Us','','../Images/About Us 2.png',1)"><img src="../Images/About Us 1.png" alt="About Us" width="309" height="368" id="About Us"></a></p>
<p> </p>
</div>
<p> </p></td>
</tr>
<tr>
<td> </td>
<td><div id="YouTube2">Content for id "YouTube2"
<iframe width="360" height="215" src="https://www.youtube.com/embed/rw17EGXVcI0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<p><\div></p>
<p> </p>
</body>
</html>
Copy link to clipboard
Copied
What's in your Structure.css file?
I'm seeing a hodgepodge of css and html attribute styling. You really shouldn't do that unless you're making an html email. All of your styles should be handled by your css and then the html attributes should be removed to keep them from interfering with the css.
Copy link to clipboard
Copied
I know you're just starting out & beginner mistakes are expected -- we've all made them . The big tragedy though is your page contains no REAL TEXT. If images fail to load for whatever reason, your site visitors won't see anything. More importantly, search engines won't find you and images of text are useless to translators and screen readers .
Below is a centered table.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About Us</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: #222;
color: #fff;
text-align: center
}
table {
width: 75%;
border: none;
margin: 0 auto;
}
caption { color: red; }
th { color: lightblue; }
/**image animation**/
table img {
max-width: 100%;
border: 2px solid #222;
display: block;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
table img:hover, table img:active, table img:focus {
/**adjust scale to desired size**/
-ms-transform: scale(1.5);
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
border: 2px solid blue;
position: relative;
z-index: 100;
}
</style>
</head>
<body>
<h1>My Awesome Site</h1>
<h2>Some Pithy Slogan</h2>
<table cellspacing="1" cellpadding="5" summary="YouTube and SoundCloud media.">
<caption>
Centered Media Table
</caption>
<tbody>
<tr>
<th scope="col">Table Heading</th>
<th scope="col">Table Heading</th>
<th scope="col">Table Heading</th>
</tr>
<tr>
<td><img src="https://dummyimage.com/400x300" alt="description"></td>
<td><img src="https://dummyimage.com/400x300" alt="description"></td>
<td><img src="https://dummyimage.com/400x300" alt="description"></td>
</tr>
<tr>
<td><img src="https://dummyimage.com/400x300" alt="description"></td>
<td><img src="https://dummyimage.com/400x300" alt="description"></td>
<td><img src="https://dummyimage.com/400x300" alt="description"></td>
</tr>
<tr>
<td><img src="https://dummyimage.com/400x300" alt="description"></td>
<td><img src="https://dummyimage.com/400x300" alt="description"></td>
<td><img src="https://dummyimage.com/400x300" alt="description"></td>
</tr>
</tbody>
</table>
</body>
</html>
Copy link to clipboard
Copied
Is there any way to fix that? I've created the div's in the structure.css