I'm using BlueGriffon and reading the following links:
Center-align a HTML table
Center a table
CSS: Centered tables
about how to center a table using CSS, as align has been deprecated. However, none of them are working, the code suggested in the 3 links to center a table looks like this:
.centered-table {
margin-left: auto;
margin-right: auto%;
}
My code:
CSS:
.maintbl {
margin-left: auto;
margin-right: auto%;
}
HTML:
<table class="maintbl" id="tblMain">
<tbody>
<tr>
<td>Hello world<br>
</td>
</tr>
</tbody>
</table>
Instead of centering, it appears on the right side. I copied the code from the last link directly into the editor, and the result was the same. What wrong and how do I fix it?
I think its better practice for table center. just use css on the table tag
example.
table {
width: 60%;
margin: 0 auto;
}
Related
So I'm designing an org chart based on the table element and I have a problem. I'm using <hr> elements to create the connectors; however, I can't get the dead space inbetween elements to go away. I've spent the last hour trying to figure out how the hell to get it to work and I just can't seem to figure it out.
I've included a picture to show:
The other issue is more of a question I haven't really looked into but figured I'd ask anyway. How can I lock the height of my table items. I've locked the width just fine but I can't seem to lock the height to 70px.
And here is some choice code:
<table class="orgchart" cellspacing="0" cellpadding="0">
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td class="item">Director</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr class="divider"><td></td><td></td><td></td><td></td><td></td><td></td><td><hr width="1" size="20"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td class="item">Assistant to the Director</td><td></td><td class="item">Deputy Director</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
And the CSS:
.orgchart td {
width: 70px;
height: 70px;
text-align: center;
overflow: hidden;
white-space: no-wrap;
}
.divider td {
height: 20px;
}
.item {
border: 2px solid black;
}
And here is the CodePen: http://codepen.io/jacob_johnson/pen/GpEjmm?editors=110
There's a margin all the way around the <hr>. Remove the top and bottom margins from the <hr>. All browsers apply default styling to elements, though not always the same. As a result you will see reset and normalize stylesheets used to improve visual consistency and development pains.
Updated Codepen with CSS below added.
hr {
margin: 0 auto;
}
If I was doing this project I would find a simple grid framework to layout with DIVs or more than likely I would create this chart as an inline SVG.
This isn't actually an order form (as yet) but I think that best describes it. I want to create a grid of 3 images inline, then text below each, then repeat indefinitely. I tried turning each row into a unique table but alignment became a problem. Then I tried making one table and giving the image and text < tr >'s unique classes, but I'm having trouble getting the height of the text rows to shrink to a more aesthetically pleasing size, and also centering the text below the image. I tried to do this artificially with as many "& nbsp's" as was appropriate, but then the text started wrapping onto a new line and it messed all that up. Code and link to js fiddle below:
<table id="saladGrid">
<tr class="saladPics">
<td id="one"></td>
<td id="two"></td>
<td id="three"></td>
</tr>
<tr class="saladText">
<td class="text"><p> acorn squash, golden beets, pistachios</p></td>
<td class="text"><p> roasted eggplant, herbed ricotta, sumac</p></td>
<td class="text"><p> arugula, fennel, blackberries, quinoa, pickled shallots</p></td>
</tr>
http://jsfiddle.net/jshweky/5bTW8/
(On a side note, I'm new to stackoverload so if there's any protocol I'm not following with respect to posting, I'd be grateful for any tips/suggestions. Thanks!)
Have a look at this: http://jsfiddle.net/EX9f9/
If you have a look at the code below you'll notice a couple of things:
HTML
<table id="saladGrid">
<tr class="saladPics">
<td class="s1"></td> //I changed your classes 'one','two',etc
<td class="s2"></td>
<td class="s3"></td>
</tr>
<tr class="saladTxt">
<td class="txt"><p>acorn squash, golden beets, pistachios</p></td>
<td class="txt"><p>roasted eggplant, herbed ricotta, sumac</p></td>
<td class="txt"><p>arugula, fennel, blackberries, quinoa, pickled shallots</p></td>
</tr>
</table>
In your HTML I changed your id's one, two, etc to classes consisting of the same word/letter, only a different number, for better readability. (Those could also be ID's btw, the main point is the use of equal terms with only one differentiator)
CSS
table {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
border-spacing: 0px;
}
td {
margin: 0px;
padding: 0px;
border: 0px;
text-align: center;
vertical-align: middle;
}
#saladGrid {
width: 600px;
height: 400px;
}
#saladGrid table {
margin: 0 auto;
border-spacing: 30px;
}
.saladPics td {
width: 350px;
height: 350px;
background-position: center;
background-size: 350px 350px;
background-repeat: no-repeat;
border-radius: 50px;
}
.saladPics td.s1 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1989_zps38d802a7.jpg");}
.saladPics td.s2 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1483_zpsc4ca87cf.jpg");}
.saladPics td.s3 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1992_zps1b881869.jpg");}
In your CSS I removed all the repeated declarations and put them together in one overlapping class. Now, only the background-image has a separate rule for every separate element.
I removed a couple of rules you don't need (and probably added in an failed attempt to style the table to your liking).
At the start I added two rules: table and td. Those are two general classes I always put at the start of my CSS, it's alright if you overwrite some of it later by other rules, these just ensure that the browser doesn't doe any funky business.
I put the whole table in a div, to show you how to contain the size of a table (but notice that the height is still more than the 400px I gave it).
Notice the text-align:center; and vertical-align: middle; in the td rule. These alight your text horizontally and vertically. (The answer to your main question)
IMPORTANT: vertical-align:middle; only works on tables, no other elements. Keep that in mind!
About your first problem:
"...trouble getting the height of the text rows to shrink to a more aesthetically pleasing size..."
This is unfortunately a property of the table: it will form itself to the content and the space it has on the page. It will fill every inch it gets and will automatically stretch to fit the content. You CAN NOT (as far as I know) limit the size of one row of a table.
Only solution would be to put the table in a div and limit the height of the div so that the whole table gets squished together, and even then I couldn't tell you for sure how the table will behave.. you push it in a tiny corner, there's no telling what it will do:)
I am trying to have a div then inside the division have some different places where I can place stuff. For example.
<div blah>
<table blah>
content...
</table>
<table blah>
content...
</table>
<table blah>
content....
</table>
</div>
I am not really a web developer so I know this question might seem simple but any help is greatly appreciated. Oh and I am using Macromedia Dreamweaver 8.
Thanks.
I would suggest using three different divs and then using CSS to place the divs. Check out this w3 schools article on CSS positioning: http://www.w3schools.com/css/css_positioning.asp
This probably isn't the place for tutorials and "hello world"s, but here's something to get you started:
http://jsfiddle.net/rBNUy/
HTML:
<div class="main">
<div class="sidebar"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
CSS:
.main{ /* this makes the containing box 200x200 */
width: 200px;
height:200px;
background: #eee;
}
.sidebar{ /* this makes the sidebar 100x200 and makes it stick to as far left as it can */
background:blue;
float:left;
height:100%;
width: 100px;
}
.top, .bottom{ /* this makes the boxes 96x96 and makes them stick to as far left as they can , eventually till they hit the sidebar */
width: 96px;
height:96px;
float:left;
background:red;
border:solid 2px green;
}
comments are obviously over-simplified, but in essence, "floating" stacks elements onto one another very much the same as you would stack letters in a word.
When a floated element runs out of space to be stacked in the same line, it just hops to the next line, and finds the closest "wall" to stack to.
In general, try not to use tables for non-tabular data - in other words, don't try to build a webpage using tables. Here is a good article which might get you thinking: http://www.alistapart.com/articles/practicalcss/
On a side note, a lot of people try to use w3schools for learning HTML and CSS. w3schools is an excellent reference for more experienced programmers, but I feel like it fails to teach novice programmers the big picture. You actually learn a lot from trial and error, and from looking at other people's work (source code). http://www.csszengarden.com/ has a great collection of webpages which will certainly help you pick up some new HTML and CSS techniques.
I implemented a rough solution for you of how (horrendous) your markup would have to look if you were to use tables.
http://jsfiddle.net/Wexcode/vMXQe/
HTML:
<table id="container">
<tr>
<td id="sidebar"></td>
<td id="main">
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
CSS:
table { background: #000; }
td { background: #fff; }
#container {
width: 600px;
height: 400px;
margin: 0 auto; }
#sidebar { width: 35%; }
#main { width: 65%; }
#main table { width: 100%; height: 100%; }
#main table tr { height: 50%; }
I know this question has been asked many times, but I never saw a satisfactory answer. I mean, an answer that actually works.
So, here we go again. Take this jsFiddle: http://jsfiddle.net/KFMyn/3/
If you remove the align="center" from the HTML, what CSS do you need to use to make the result look the same as the original?
The answers I found usually amount to margin:0 auto and/or text-align:center but neither of those have the desired effect of making the result look the same as the original.
The text align center covers most of the text elements but a little extra is needed to centre align the table
div {width:400px; text-align:center;}
table {margin: 0 auto;}
table td {text-align: left;}
http://jsfiddle.net/NYuv8/4/
div {width:400px; text-align: center;}
table {display:inline-block;}
Should work as well in addition to Paul's answer.
http://jsfiddle.net/KFMyn/13/
div {width:400px; margin: 0 auto; text-align: center; }
div > * { margin: 0 auto; }
Works for me. But this may not work properly when you have multiple nested dom elements
margin: 0 auto;
text-align: center;
Above Code might not be working when you are using bootstrap grids.
Here is the quick solution for this using bootstrap 4 and IT WORKS IN EVERY BROWSERS
<div class="row">
<div class="col-sm-2">
<div class="customClass mx-auto">
<p class="text-center"> your text goes here </p>
</div>
</div>
</div
you can put any column like col-sm-2, 3, 4.......12
Replacement for Center tag in different situations
1. text-center
Works with p, a, button, h tags and more i.e all the tags containing data or text directly
2. Flex
It can used to align complete element inside another element, however it has more utilities check documentation for reference
Use can center elements using flex in following manners
display:flex;
justify-content:center;
align-items:center;
Another import property is flex-direction i.e
flex-direction:column
flex-direction:row
Use flex direction according to the type of alignment you want
3. mx-auto (bootstrap class)
You can try and style the table as well, like this:
div {
width:400px;
margin: 0 auto;
text-align: center;
}
div table {
margin: 0 auto;
}
Why not just leave it
<div align="center">
It still works just fine with all browsers as far as I know. I have plenty of old html and I got to this thread only because my NetBeans IDE is warning me this is obsolete. My guess is the browsers are automatically translating to the correct solution. Same thing with
<font size="6">bla bla</font>
still works just fine and probably automatically converted to
<span style="font-size:36px">bla bla</span>
div { width: 400px; text-align: center; }
table { display: inline-block; }
This should work. Check example here: http://jsfiddle.net/ye7ngd3q/2/
and if you want elements inside table cell left/right aligned then you can define individual classes and assign to element respectively as show below:
HTML
<div align="center">
A centered div
<p>A</p>
<table border="1">
<tr><td class="align-left">centered</td><tr>
<tr><td class="align-right">div</td><tr>
</table>
<ul><li>A centered div</li></ul>
</div>
CSS
div { width: 400px; text-align: center; }
table { display: inline-block; }
.align-left { text-align: left; }
.align-right { text-align: right; }
Is there anything I can do to make IE display table cells as actual blocks?
Given this style:
table,tbody,tr,td,div {
display: block;
border: 1px solid #0f0;
padding: 4px;
}
And this html:
<table>
<tbody>
<tr>
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
</tbody>
</table>
<div>
<div>
<div>
<div>R1C1</div>
<div>R1C2</div>
<div>R1C3</div>
</div>
</div>
</div>
The table renders exactly the same as the nested divs in both Firefox and Safari/Chrome. But in Internet Explorer (8) the property display: block has no effect. The table renders exactly as if I don't set that property.
My main problem is that the cells don't break; They all render on one line. (The tbody and tr elements don't get any borders nor padding. That is not a problem for me right now, though.)
I haven't found any information on the problem when searching. Compatibility charts on quirksmode and elsewhere states that IE supports display: block since v. 5.5. Any discussion on table display problems seems to be when doing the reverse - giving non-table elements any of the display: table-* properties.
So once again, is there anything I can do to make IE render table cells as block?
(The real table is really a table, with tabular data. I would like to keep it that way, and restyle it unobtrusively.)
I applied float: left to stuff. It kinda works.
Live Demo
The biggest problem is width: 100% combined with the padding is making things too wide.
So:
Live Demo (without the problematic padding)
That looks a bit better, but I'm not sure how you can easily add padding everywhere if you need it.
This fails --> miserably <-- in IE7 (it just won't get over the fact that it's a <table>), and even if you don't care about IE7, it will need tweaking for your use case (if it's usable at all).
IE7:
The following worked for me for IE6+:
tr {
display: block;
position: relative
}
td.col1 {
display: block;
left: 0;
top: 0;
height: 90px;
}
td.col2 {
display: block;
position: absolute;
left: 0;
top: 30px;
}
td.col3 {
display: block;
position: absolute;
left: 0;
top: 60px;
}
Assumptions:
cell height 30px
Drawbacks:
Fixed cell height
Cumbersome specification of top property (maybe generate)
Only works when HTML provides classes for columns
Advantage:
Works in all browsers.
When to use:
When you have no control over HTML, but have control over CSS. Some hosted payment solutions come to mind that display in an IFRAME and offer a custom style sheet.
Just figured it out with a collegue of mine.
ALTHOUGH I STRONGLY RECOMMEND TO NOT SUPPORT IE8 AT ALL ANYMORE!
Since you are facilitating the use of an unsupported and currently unsafe product that is not up to par with current standards and techniques. It would be way better to tell your users to upgrade and give them some browser downloadlinks to choose from.
That being said. The CSS below is the minimum css you need to fix it in Internet Explorer 8.
table {
width: 100%;
}
td {
float: left;
width: 100%;
}
<table>
<tbody>
<tr>
<td>cell-1</td>
<td>cell-2</td>
</tr>
</tbody>
</table>
add this code:
<!DOCTYPE html>
我这里是这么解决的，加上上面那条声明语句，display:block对td就会有效。
you need add this code in the top.
<!DOCTYPE html>
<html>
<head>
<style>
td {
display: block;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Job Title</td>
</tr>
</thead>
<tbody>
<tr>
<td><div>James</div></td>
<td><div>Matman</div></td>
<td><div>Chief Sandwich Eater</div></td>
</tr>
<tr>
<td><div>The</div></td>
<td><div>Tick</div></td>
<td><div>Crimefighter Sorta</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Add this line of code in the top, but use 'float' and 'width' is very good.
sorry, my english so poor.
make it display:table-row; instead of display:block
It will work like it is supposed to