I noticed that the <td align="center"> code works differently on the MediaWiki.org page and the en.wikipedia.org page. I type the same following test code on the both wikis:
http://www.mediawiki.org/wiki/User:Scottie33/sandbox
http://en.wikipedia.org/wiki/User:Scottie33/sandbox
Source (test) code:
<table border="1">
<tr>
<td align="center">
test test test test test test
test
<table border="1"><tr><td>
[[File:Information_icon.svg|20px]]
</td></tr></table>
test
</td></tr>
</table>
Why the MediaWiki.org page produce following (wrong) code:
<td style="text-align: center;">
instead (expected) of this:
<td align="center">
When wgHtml5is enabled (which is enabled by default in the MediaWiki software, but disabled on most Wikimedia Foundation wikis, and has recently been enabled on mediawiki.org) then the Html processor in MediaWiki strips presentational attributes such as these, and replaces them with a rough equivalent inline style attribute.
That system has a bug (filed as bug #36495 (bugzilla.wikimedia.org)) in scenarios such as these, because text-align or float alone doesn't cover all of it.
See also:
$wgHtml5
$wgCleanupPresentationalAttributes
But so much for the cause of the problem. Back to the issue at hand, the short version is: those attributes are deprecated, and you're best off not using them in the first place.
Instead use CSS. Or, in this particular example (as Bergi mentioned earlier), there is an alternative method that is more appropriate: Use the |center| keyword in the [[File: syntax.
The wikis seem to run with different configs for HTML Tidy values of $wgCleanupPresentationalAttributes, which will correct the deprecated styling html attributes in favor of css.
Yet, align="center" and style="text-align:center" don't show exactly the same behaviour. While the align attribute affects both inline elements, block elements and afaik itself, the css property only aligns inline elements (text). To align block elements, you'd use the margin-property.
Correct markup:
{| style="text-align:center; border:1px solid;"
| test test test test
test
<div style="margin-left:auto; margin-right:auto;">
[[File:Information icon.svg|20px]]
</div>
|}
or, even easier:
[[File:Information icon.svg|center|20px|border]]
Related
I have a table class that I use to vertically centralise text in a span or div. I am using Handlebars in Node to render several templates server side, I have used this method on several partials in my web project, with no problems.
However in one particular partial / area of markup, either the browser or Handlebars is ignoring or removing the table, tr and td tags, showing only the text that is inside the tags.
In the past when this has happened it was because my tags were incorrect. However I have cross checked this code with my other markup where the table tags do show (in other partials), so I can't see where the problem is, and I can't find any suitable online topic about this (it is probably something really obvious that will make me look like a dummy).
I have tried in Chrome and Edge. I have also tried saving the markup snippet in a .html file (as opposed to a .hbs file) and opening that in the browser, and by doing this it does show the table tags. The consequence of this error is that I am unable to vertically align the text in the span. I am not sure if the markup is invalid according to the browser or Handlebars, but I am not using any {{Handlebars}} tags here so it shouldn't warrant the table tags to be invalid.
Markup:
<div class="lp-menuselector" title="View summary of Individual Learning Plan and evidence pack">
<div class="lp-menuselector-iconholder">
<img src="icons/icon_lp-overview.svg"/>
</div>
<span class="lp-menuselector-textholder">
<table class="tablecellleftalign">
<tr>
<td>
ILP Overview
</td>
</tr>
</table>
</span>
</div>
Output markup shown in Chrome Developer Tools / Elements:
<span class="lp-menuselector-textholder">
ILP Overview
</span>
Topic Closed:
After I restarted my computer and restarted the Node application, this error no longer occurs. Glitches in the matrix.
I am building HMTL emails and I use nested tables to layout the email. To change text I apply the styles directly to the < td > tags and this works for the most part across the board. I am noticing though on SOME heavily nested tabled (Greater then 5) the style is being removed completely on Gmail in Internet Explorer, and on Yahoo in various browsers (on a PC). Below is my code:
(This code is ~5 tables deep)
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-bottom:10px;font-family:'Century Gothic',Arial, Helvetica, sans-serif; font-size:26px; color:#202020;">The Latest</td>
</tr>
</table>
Has anyone ran into this before or know why they might be stripping the style? It's not only text styles but the padding is also removed on these < td > tags.
I've never had the issue myself, but there is known to be issues with nesting tables too deep. I'm willing to bet that there is a more precise way to layout your email to avoid the issue. Don't be scared to use colspans and rowspans when necessary. Post your code if you like.
I think I may know why this is happening. I've seen issues when using a font-family with quotes throw off the inline CSS. If you move the font-family to the end of your inline styles it may work. See below.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-bottom:10px; font-size:26px; color:#202020; font-family:'Century Gothic',Arial, Helvetica, sans-serif;">The Latest</td>
</tr>
</table>
In case this is useful for anyone: I ran into this problem with a specific <td> that was getting all the inline CSS stripped. After checking it, I found I had an incorrect property declared, like so:
padding-bottom;
Removing that incorrect property resolved the issue.
It seems to me that Gmail somehow validates the css of each element, and strips it all if it finds an error.
Not a direct answer so my apologise, but could you not use CSS instead of HTML tables? You will be able to achieve the same result I would think?
I just tested an html email that works for Gmail.
Generally speaking, I learned that Gmail tends to strip out the whole inline style attribute when you declare font-family, this behavior sometimes happens when:
1) when you declare a custom font using ' or ", es: <span class="small-text" style="font-family:'Titillium Web',Arial,sans-serif;"></span>
2) if don't put spaces between ; , , and : chars, in a font-family declaration.
3) every time you declare 2 <span> with a font-family in the same <td>, Gmail will strip the second's <span> rules
but I don't know what is the general rule, so my solution was: always declare font-family inside a separate tag, at least, in this way you won't lose all the styles.
example:
<span style="color:#8d8c87;display:block;font-size:12px;line-height:120%;text-align:center">
<span style="font-family:'Titillium Web',Arial,sans-serif;">text</span>
</span>
I have recently started to make some User Interfaces for Websites. What i am currently using something called Bootstrap, which is easy to start with and looks good. But the idea behind does not seem too efficient, since we are making our jsp code (the content) dependent on the css elements like this:
<tr class="row col-m-7">
<td class="column"> ...
<a class="btn btn-xs btn-success"> .. </a>
</td>
<td class="column"> ... </td>
</tr>
Recently the Bootstrap has introduced a newer version (v3), and i had to change many class attributes until the jsp gets a stable look. I would like to keep the code in separate layers for content and presentation like this, so i can easily switch my UI framework without loosing any content:
Content (simple html or jstl):
<tr>
<td>...
<td>...
</tr>
Presentation:
.. somehow achieving giving a good look to the table above .. (how ???)
How can i separate content and presentation layers on JSPs?
UPDATE
A new standard is being developed, called Web Components, which will enable developers to create custom html elements which hide the implementation of styling and inner html markup. For example, a modal widget could be declared by the following syntax:
<bootstrap-modal>
<h1>Hello World!</h1>
</bootstrap-modal>
Behind the scenes, the developer has specified the actual html markup used to render the widget, that implementation is tied to the custom component.
Here are a few tutorials to get you started:
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/#toc-separation
http://css-tricks.com/modular-future-web-components/
https://hacks.mozilla.org/2013/08/introducing-brick-minimal-markup-web-components-for-faster-app-development/
If all <a> elements were to look the same, then you could write one css class and all <a> elements would have the same styling:
a {
color:blue;
}
Some websites, for whatever reason, possibly even concerning the value of the href attribute; will want different colors and styling for different <a> elements. The only way to achieve that is with the class attribute which refers to a css class from a stylesheet:
a.red {
color:red;
}
<a class="red" href="red.html"/>
This means that if you want unique styling for same element names, you will always need to write code which links together the presentation element and the styling.
I have an old version of frontpage I am toying around with. I planned to use django in the background to do the heavy lifting but thought using this old Frontpage software I have would be good for the front end but I am finding it is writing code in an out of date fashion. I was reading that the tag has been deprecated and we should be using "style" now. the example I was reading has it inside the paragraph or header tag. However the code I have from frontpage is using the font tag inside of a table cell tag so I am wondering what is the correct way to write it.
Here is the code generated by Frontpage
<td width="190" align="center" bgcolor="#000080" height="18"><b><a href="index.htm">
<font title="return to main page" color="#00FFFF" face="Verdana">Home</font></a></b></td>
would I just change it so the styles
<td width="190" align="center" bgcolor="#000080" height="18" style="color:#00FFFF;font-family:Verdana">
<b>Home</b>
</td>
My problem with that is now all text in the table cell would be that font right? So if I wanted more things in the table cell than just the link where would I put that? Also I just tried that and the font-family is working but not the color...?
You need to look up and spend some time learning CSS.
You can do something like this with it:
CSS:
.linkstyle
{
font-family: verdana;
color: #00FFFF;
}
CODE:
<span style="linkstyle">Home</span>
Using inline styles like you've posted, this would work.
<td style="width: 190px; height: 18px; text-align: center; background-color: #000080;">
<strong>Home</strong>
</td>
As a side note, you have several very bad practices. Using tables to lay out your website is very outdated and hard to work with (which is why it is outdated). Using inline CSS is confusing to everyone (including yourself). In addition to the references others have posted, I recommend http://htmldog.com/
Why are you using Frontpage?
Grab a free editor (search for one), or just create it yourself using something like Notepad++. The amount of time you will spend cleaning up code will be a total waste of your time when using Frontpage (gui).
Also use CSS styles instead of inline bgcolor / font, etc;
You could use a combination of <span> tags with class attributes and css.
Here are some good references on that stuff:
HTML: http://www.w3schools.com/tags
CSS2: http://www.w3schools.com/css/css_reference.asp
CSS3: http://www.w3schools.com/css3/css3_reference.asp
Is there a coding standard for HTML? Please suggest links that have the coding styles for HTML.
For example:
<table>
<tr>
<td>
Data
</td>
</tr>
</table>
Here's a few standards to add to your list.
1. Indentation
You seem to have the right idea on this already. The main purpose of indentation should be to make it clear where a tag is opened and closed. Consider this example.
<div><p>Hello World</p><div><p>Hello World</p></div>
This looks okay until you indent it properly and spot the error:
<div>
<p>Hello World</p>
<div>
<p>Hello World</p>
</div>
The original div wasn't closed. Ooops! This is why indentation can be a great time saver.
2. Tags and Attributes
It is generally accepted now that all tags and attributes should be lower case. We dispensed with ALL CAPS tags a long time ago in HTML and also with camelCasing for things like onMouseOver and onClick, which are now all lower case. All attribute values should be surrounded with double-quotes. For example:
<div id="content">Hello</div>
Not
<div id=content>Hello</div>
<DIV ID="content">Hello</DIV>
3. Semantic mark-up only
Don't use any tags to infer style or to control style. For example...
<font>
<b>
Or attributes like...
<table border="2">
Also, don't use things like h1 tags just to get a bigger font.
Try to think of what the tag means, "h1" is a top level heading, "p" is a paragraph, "table" denotes data laid out in a tabular format. Never use a tag for a different purpose to what is intended and try to know what tags are available. For example, using lists instead of manually laying out lists of things.
Don't use tables for layout. (I have emphasised this important point using the semantic "em" tag).
Don't use too many div tags to solve a problem! (div-itus!)
Firstly choose your doctype and then validate your html against the W3C validator for formatting errors
Other things to consider off the top of the head are
Proper indentation
Resisting the temptation to add too much markup i.e. keep the markup simple
Structure your html semantically so that if you switched off style sheets the document would still make sense and be in the right order
Avoid deprecated tags e.g. <font>
Choosing generic class names e.g. mainHeader instead of largeRedHeader
Use classes for repeating elements and ids for elements that appear once
Use classes and ids on parent elements only and style child elements using css e.g. #intro > p instead of #intro .paragraph
HTML Tidy provides a pretty reasoble style, which it will also help you enforce.
Did you mean indentation style? Here is the de facto indentation style:
<table>
<tr>
<td>One line of text - no indent.</td>
<td>
<p>
Multiple lines of text. <br />
With line breaks - indent.<br />
Inline: <b>no indent</b>
</p>
</td>
</tr>
</table>
However, the style above takes too much spaces, for some indentation styles, HTML, HEAD and BODY are not indented.
<html>
<head>
<title>Title</title>
</head>
<body>
<div>
<h1>Title</h1>
<p>Hello, world! The content begins here.</p>
</div>
</body>
</html>
Personally I follow the xhtml standards (all open tags get a closed tag, case sensitivity and so on). It makes it easier to follow the code and to format things automatically. I also generally indent everything 1 from their parents:
<table summary="example table">
<tr>
<td>
Data
</td>
</tr>
</table>
I also tend to try and include all of the required attributes for accessibility, I figure it is a nice thing to do.