Admin Forum:Need help converting data table to HTML 5

Forums: Admin Central Index → Technical Help → Need help converting data table to HTML 5 Wikia's forums are a place for the community to help other members. To contact staff directly or to report bugs, please use Special:Contact.

Top
Please see:
 * http://cannabis.wikia.com/wiki/User:Timeshifter/Sandbox_19

See the middle table. I need an HTML-5 way to add cell padding to all the cells but without adding it individually to each cell. I also need narrower borders. See the bottom cell to see what I am looking for.

I want to be able to paste the finished table into email, and so I don't want the table dependent on external CSS style sheets.

It seems also that style="text-align:left;" in the division works on all cells in Firefox, but not in Internet Explorer. --Timeshifter 20:02, July 10, 2012 (UTC)


 * I'm looking into it for you now. – Jazzi  ( talk ) 20:10, July 10, 2012 (UTC)


 * Done. Copy the following onto the page:

– Jazzi  ( talk ) 20:13, July 10, 2012 (UTC)


 * To answer your note about Internet Explorer, if you apply text-align to the table, IE does not apply that to every cell. You have to apply it to every cell yourself because IE is a bit retarded >_>. You could do that by giving your table a class, say class="my-table" and then putting this in your MediaWiki:Common.css:


 * Your above table is not HTML-5 compliant. "bgcolor" and "align" for example. Thanks for trying though. I am not sure it is possible to do what I want to do.


 * I think the designers of HTML 5 and browsers are clueless to real world needs in many cases. Especially for pasting stuff into email where one can't take an external stylesheet. And especially for making tables simpler. It should be possible to set the text alignment of all header cells in a division, or all data cells. But I am getting the feeling that it is not possible. See:
 * http://www.webdeveloper.com/forum/showthread.php?t=262443


 * I guess I will have add some HTML-4 stuff as backup:
 * border=1 cellspacing=0 cellpadding=3


 * It solves the problem. I hope it is left in the wikitext after the latest Mediawiki version is installed on my wiki. That way the table will still look right when pasted in email.


 * Maybe by HTML 6 the designers of it will get a clue. --Timeshifter 20:53, July 10, 2012 (UTC)
 * Wiki needs != real world needs.--PedroM 21:11, July 10, 2012 (UTC)


 * Why paste stuff into emails? That's what attachments are for. Pasting stuff into emails is laziness.


 * Fools open attachments. :) --Timeshifter 21:36, July 10, 2012 (UTC)

Found CSS for narrow cell borders
Return to top.

This page is very helpful:
 * http://www.quirksmode.org/css/tables.html

border=1 style="border-collapse:collapse;"

creates narrow cell borders, and it is HTML-5 compliant. See:
 * http://cannabis.wikia.com/wiki/User:Timeshifter/Sandbox_19 --Timeshifter 23:43, July 10, 2012 (UTC)

Ways to add padding to all cells
Return to top.

Still looking for an HTML-5 way to add padding to all the table cells at once. --Timeshifter 23:43, July 10, 2012 (UTC)


 * So far as I know, there is no HTML-5 way to add padding to all table cells. The purpose of HTML is structure, not style. For style, you're supposed to use CSS, because that's why CSS exists. (I posted one CSS way of doing cellpadding above, by the way).


 * Thanks, but I want do it without an external stylesheet. In HTML 4 it is easy. Just add cellpadding=4 to the top of the table code. But in HTML 5 it seems one has to add CSS to every single cell. There is no single CSS style (as far as I know) one can place at the top of the table code, or division code, to add padding to all cells in the table. --Timeshifter 23:57, July 10, 2012 (UTC)


 * You're correct, Timeshifter. It cannot be done without an extrenal stylesheet. It would not have to be a complicated one though:




 * Thanks. I went to a MediaWiki 1.19.0 wiki, and created a sandbox:
 * http://terraria.wikia.com/wiki/User:Timeshifter/Sandbox_1


 * It seems the cellpadding on the bottom table still shows up. So I guess some kind of transitional (not strict) HTML 5 is being implemented on that wiki with MediaWiki 1.19.0. --Timeshifter 04:18, July 11, 2012 (UTC)


 * Math is correct, you know? Inline styles are often unavoidable here at Wikia. But in the non-wiki-world where most of the world's population lives, they're considered as evil. The only thing that's more evil than inline styles are HTML tags and attributes that are purely presentational - like.


 * You - as an admin - are in the convenient position to define styles for your tables in the MediaWiki namespace. You should use that privilege! That's exactly what it's for! --


 * I know that this has now become a religious groupthink among many devotees of the latest and greatest version of HTML X. But in the "real" non-wiki world, people pass stuff along all the time in email, their own websites, blogs, etc.. People copy and paste little bits of this and that all over. That is difficult with strict HTML 5. Fortunately, most websites, blogs, email, etc. use transitional versions of HTML 4, 5, etc..


 * Unfortunately, in their zeal to make design conform to one standard (just like on Wikia with Oasis) HTML 5 creators almost screwed things up royally. Fortunately, they listened to people like me and allowed things like border="1" to remain approved in HTML 5. Otherwise many data tables would be incomprehensible when passed around. At least they can have borders around all the cells. Even if they lose all the rest of the styling. Imagine if copying and pasting text was lost because paragraph and line breaks became considered to be disposable "styling". --Timeshifter 16:36, July 11, 2012 (UTC)

I've pushed your buttons again, haven't I? Either I'm quite the button pusher or you've got quite the buttons :P

You shouldn't view CSS as a religious issue (even though it may look like that sometimes). Mixing design and data makes the document difficult to read and difficult to maintain for humans and machines alike. Separating design and data gives us developers a real fighting chance. Everything has its own place and is parcelled into neat small packages. We know where to look for what and how to modify it. We can map everything to a simple mental model. All of that breaks down when presentational elements sneak by and squat the HTML. That's why we're a little prickly about such things.

Copypasting designed data from one application into another is a lottery. You might win sometimes, but just as often you loose. If the integrity of your design is paramount, then you shouldn't copypaste. If it's more about the content, then don't worry too much about padding and borders and whatnot. Controlling design and content across different mediums is possible, but it's a bit tricky. You would have to embed the stylesheet into the mail, link to an external stylesheet or make do with inline styles. Either way: It takes extra effort.

Not sure why you brought up Oasis... I don't work for Wikia, so I'm agnostic about skins. If you like MonoBook or Vector or whatever better, go for it! Line breaks aren't design. Even I know that. They carry meaning and cannot be separated from the other content.


 * I understand what you are saying. But developers like many other software geeks (I am becoming one by necessity) are clueless about many things. If HTML cellpadding is deprecated then there should be an inline CSS style to add to the top of table code that adds padding to all cells. It is illogical to have the ability to add inline CSS cell padding cell by cell, but not to have it inline for the table overall. It is not just illogical, it is idiotic. :) --Timeshifter 21:16, July 11, 2012 (UTC)


 * " If HTML cellpadding is deprecated then there should be an inline CSS style to add to the top of table code that adds padding to all cells" -- Agreed, but this is not an issue having to do with HTML/CSS. It's an issue with the Internet Explorer browser itself. Every browser has its own interpretation of HTML/CSS. Of course, HTML demands user agents to implement things in a certain way: but sometimes there are minor bugs or differences. That's just a result derived from the fact that there are multiple web browsers, it's no fault of HTML itself. In other words, you should be complaining about Microsoft, not HTML. Was thinking about the IE issue above, which was text-align, not cellpadding. Sorry, poor memory.


 * No problem. And I complain about Microsoft on general principle. :) You are right about browsers. See:
 * http://www.quirksmode.org/css/tables.html - unfortunately it does not list results for text-align. Plus that page does not explain the variations in how browsers interpret the CSS it lists. It just shows whether the browser interprets the CSS or not.
 * Email is also different from one email program or web mail company to another. --Timeshifter 00:33, July 12, 2012 (UTC)