In the development of html web pages. What is the difference between :
align="middle"
align="center"
Historicaly speaking, middle refers historically to being in the centre of both vertical and horizontal dimensions. I remember (vaguely) using this syntaxing back on HTML3 and the very early days of web design, particularly for centering table cell contents both in the X and Y planes.
As far as I can tell middle can now only be used in inline <table> construction code, and is the same output as center.
center refers more often (but not always) to the horizontal plane only, so horizontally centres an element such as horizontally centering text in a column.
Nowerdays (ie since 2006) if middle is a valid value at all, it is simply another word for center and wll be silently converted by the HTML renderer.
BUT
Generally speaking, as of 2017 (and several years beforehand!) you should not be using these sort of construction syntaxes in HTML at all, instead passing all this technical layout construction stuff to CSS).
Related
I am modifying a website that currently uses a <table> for a price list.
Because tables obviously don't break + wrap, on a mobile device the right hand side of the table disappears of the right side of the screen.
I'd like to use CSS to make this price list responsive, so that when the browser runs out of width it renders the next column underneath. This is simple enough if I stop using a single table and use float:left, but in this case I want the name of the cottage to be repeated (the first column) when a horizontal break occurs.
Is this possible? If so, how would I achieve it?
Peter, a better way to construct this to do what your aiming for is not to use the Table element at all.
Instead, use a series of div elements and give them the display type "table-cell" on the individual divs, along with "display: table" and "display: table-row" where needed for for rows and the overall table.
See: http://www.senktec.com/2014/01/using-css-display-table-cell-for-columns/
For an example.
Once you've broken things down into indidvidual div's, your then free to place those divs where you see fit, You could with a little bit of re-layout in the structure of the divs, put a new set down below the the first part of the table as you mention in your question.
However, once your using div elements, this actually opens up a more interesting way of doing things, by using FlexBox and more specifically "flex-wrap".
Flexbox and it's wrapping modes will do exactly what your trying to achieve, you just need to make the parent container "display: flex", add a flex wrap css rule, and the immediate div children of the container will take care of themselves.
Flexbox is fully supported by ALL mainstream browsers these days, and the various table display modes have been around since HTML4, so your not going to have an issue with any of it working. Flex also largely works on IE11, with a few minor edge cases (I implemented an online designer for a company 3 years ago when flexbox was first introduced and the target was IE11).
With the individual div approach, and if your targeting reasonable recent browsers you can actually go one step further and use CSS media queries to adjust things for different display widths
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
and you can even now do some feature detection is CSS too
https://css-tricks.com/using-feature-detection-to-write-css-with-cross-browser-support/
The only thing I can't come up with a possible solution for in pure CSS is the repeating of the cottage names column, although I suspect you might actually be able to conjure something up using "data attributes" and css rules targeting those attributes to get the text of the column name into an "element::before" pseudo css rule of some kind, I'd need to sit and spend a day playing with that idea to come up with anything concrete though.
This question already has answers here:
What replaces cellpadding, cellspacing, valign, and align in HTML5 tables?
(4 answers)
Closed 4 years ago.
Wow I feel outdated! I have been using the align and valign attribute to align data in tables for our html campaigns. Let me preceed this by saying that we do data intensive emails for finance. I know I know....we are not about standards :)
so all the examples I have been seeing are to style the cells via css like so
td {
text-align:left;
}
Well in emails we cannot do that, we have to use line styles like this:
<td style="text-align:left;">
Now since our emails have data intensive tables(i,e, performance tables)
Am I supposed to now style each cell like above?
There are a tremendous amount of cells. Like 100 in total. As you can imagine this would take forever and in our industry clients want things so fast its absurd. So using dreamweaver i can just select the cells and align them. Boom done!
but is that correct? if so, how can i do this quickly?
Thanks!!!!
CSS text-align is not always consistent across major email clients. Always align cells like this for 100% consistency:
<td align="left">
By default, everything is left aligned anyway, so you only need to worry about it if center or right aligning.
Use td elements in for email as Outlook doesn't play well with divs
http://www.campaignmonitor.com/blog/post/3572/email-rendering-issues-and-fixes-for-outlook-web-app-owa/
I want to do the following:
------------------------------------------------
width: 100%;
height: 60px
image center
image bottom/right
-------------------------------------------------
I used to do it with table:
<table border="0">
<tr>
<td width="25%"></td>
<td width="50%"><center>image center</center></td>
<td width="25%" valing bottom><div align="right">image bottom/right</div></td>
</tr>
</table>
but they say using tables for formatting is bad (Dunno why)
So is there any idea how to do the following banner? I heard there is absolute position, so mightbe the 2 images could be embedded to 2 divs
First off before I do any explaining I think you could use some visuals of just how powerful CSS can be...
CSS Zen Garden shows how using a different CSS style sheet can completely change the entire way a site looks (use theme links on the right side)...
http://www.csszengarden.com/
My own site supports multiple themes which you can instantly change without even reloading the page...
http://www.jabcreations.com/blog/?prompt=themes-official
1.) Tables are intended for tabular data only, think the nutrition panels on food labels if you're not sure where to start. Tables are great for tabular data because it removes the formatting issues however you should never put non-tabular content in to tables as it disrupts the context of the content to search engines and you should instead use division elements instead since non-tabular data tends to do anything except for be presented in a tabular fashion.
2.) The context of using either CSS background-images or (X)HTML img (image) elements comes down to what you're trying to do.
2.A.) CSS3 allows the use of multiple background-images however browser support isn't yet universal when considering browser market shares...
http://www.caniuse.com/#search=css3%20multiple%20backgrounds
...as time passes however IE8 and other older browsers that do not support this modification to the CSS background-image property will slowly disappear so it will only become an increasingly viable option.
2.B.) You can combine an img element and a CSS background-image together to get two images to display inside of a single element.
2.C.) You can use two division elements with the same styling (or lack thereof) and then give them each a CSS background-image.
Here is the generally relevant CSS code...
background-image: url(kittens.png);
/* Choose one or the other below */
background-position: right bottom;
background-position: center center;
I'll reiterate that tables for on-tabular data is exceptionally bad for styling. Once you begin to grasp how CSS works (cascading means rules on lower lines override earlier lines, so the same rule on line 10 will override the same rule on line 9, if they are the same rule).
By using CSS you're going to have so much more power to quickly implement changes across your entire site and you'll be able to implement changes quicker and move on to more important things.
I want to get 4 columns, with the text floating in all of them. I don't want to make 4 separate divs, because when the first column if full of text, the text should continue in the next column.
I also want to set the width of each column and the padding between. Additionally, the height should be flexible, depending on how much text there is.
Do you have any ideas?
This is very difficult to achieve, and is not how HTML is designed. The recommend approach would be to render all the text in a single HTML element (div or p, etc) and in the browser, dynamically alter the content and markup with respect to a pre-determined "preferred height" and number of columns. You can use the height() methods of jQuery to assist you in this.
Here is a script with some of the groundwork.
An article explaining future support available in CSS3.
This article (11 Classic CSS Techniques Mad Simple With CSS3) shows how to do this using Mozilla- and WebKit-specific properties. Columns like these are item number 9 on the list.
For IE you'll need to wait for CSS3 support or use a script, such as the Columnize jQuery plugin mentioned in the article.
I've seen quite a few answers on this site which advocate using tables for a design because it can't be done using CSS and Divs... when in actual fact it can be done with a bit of ingenuity.
What are examples of things that genuinely can't be done?
The only one I've ever come across is vertically aligning a box within another box.
*edit: I suppose I'm mostly interested in unachievable layouts using CSS2
Vertical alignment of blocks or text.
Having elastic containers that stretch to the width of their content.
Having several "rows" with the same structure where "cells" are synchronized in width throughout all rows.
Having several "columns" synchronize their height (up to the length of the longest text block).
These are quite basic designer needs that appear in even basic design concepts.
Cells/columns issues can possibly be solved with CSS if you take IE8 into account, but it will be many years until its wide spread (even IE7 in 2-3 years hasn't reached the desired market share).
As for "ingenuity", it is not that good thing in software development. Tricks that your colleagues and you yourself after a couple of months will not be able to understand usually build up that code base that everyone either is scared to touch or determined to refactor/rewrite completely.
Remember the KISS principle. The simpliest way you do this, the more reliably it will work.
The answer to this question depends on a number of things:
How backwards compatible do you need to be? Including IE6 will decrease the capacity of pure CSS; and
How much of your site is fixed-width and/or fixed-height. There are certain things in CSS that become hard if not impossible in variable width and/or height situations.
Side-by-side content is a problem for CSS. You can use floats for this but if the sum of widths exceeds the width of the container, the tail end floats will fall down below. Tables are more capable in this regard as they will squeeze columns where possible to make things fit and cells will never be split onto new rows.
Vertical centering you mentioned. Its trivial with tables and hard or impossible (depending on compatibility and fixed or variable heights of the container and the item) in pure CSS.
You may also be referring to hover content. IE6 only supports the :hover pseudo element on anchors. Javascript is required for that browser for :hover-like behaviour.
Basically if what you need to do can be done fairly trivially with pure CSS then do it. If not, don't feel bad if you have to use tables despite all the anti-table fanatics (and they are fanatics) jumping up and down in horror.
If you want a relatively simple exmaple of this check out Can you do this HTML layout without using tables?. This is a conceptually simple layout problem that is trivial with tables and noone has yet posted a solution meeting the requirements with pure CSS.
"... when in actual fact it can be done
with a bit of ingenuity."
How about 'avoiding the need for ingenuity' as a thing that's hard to do in CSS.
;)
tables should be used for tabular data! We should always try to use the correct HTML for the given content in which to markup. So not just div's (span, ul, li, dl, strong, em ... etc) This ensures that the content is not just looking right but is right (for SEO and accesibile reasons)
By not using tables it allows us to transform the content from one look and feel to the next without having to change the HTML, see Zen Garden
For now though with current browsers CSS table like layouts can be done but are tricky. there are techniques to get round many of the issues, weather they are done though global wrappers with background images, or positioning fixes... where both articles also refer to using Javascript to progressively enhance a page to get those additional classes you may require.
or of course you could use some XSL as a middle ware to help do formating if processing from a CMS.
Alternate row colors in a table without manually (or with the aid of a script) assigning alternate styles to each row.
Determine one element's position relative to another. For example you can't use CSS to determine which position one box is in a bunch of floated boxes using the same class. Would be nice to for example know if one box is the first box floated, or the second, or the last.
Handle widows. A widow is a word that dangles off the end of a paragraph, that is a single word starts the last line on a paragraph. It's a big nono on print design, but in the world of web it's hard to control.
Floating elements in multiple columns, where text in each cell can expand the height of the element, but the entire row below must be pushed down if this happens.
--- --- ---
|AAA| |BBB| |CCC|
--- --- ---
--- --- ---
|AAA| |BBB| |CCC|
| | |BBB| | |
--- --- ---
--- --- ---
|AAA| |BBB| |CCC|
--- --- ---
An image cannot placed in exact center of a cell with align attribute.It can be done with some brute force .
Sounds obvious but you can't change content with CSS, it can only be used for styling.
Rory, I think you're absolutely right. Vertical alignment can be done with line-height, and creating lay-outs in CSS really isn't that hard. In fact, it's far more flexible when using absolute/relative positioning and floats.
People still using tables for design should really brush up with the current standards.
Going on topic, with CSS3 coming up it's hard to think of stuff CSS can't do. Image manipulation, content manipulation, advanced selectors, it's all going to be possible. But if I had to name one thing, it's that with CSS you can't (and won't) be able to rotate elements.
I was unable to use a transparency to create a variable-height text area across all pages. I believe it's impossible. I ultimately just wrote a quick javascript function to reset the height after the page load, to get the layout to work. See http://peterchristopher.com to see what I mean by transparency for the text area.
There is absolutely nothing tables can do that CSS can't.
There seems to be a common misconception that HTML & CSS should be easy. It isn't. If you find yourself wanting to use tables then its your CSS skills that need improving not the technology (although the technology does obviously have plenty of holes that could do with improving).