Wikia

Community Central

Admin Forum:Need help converting data table to HTML 5

Talk0
90,776pages on
this wiki

This Forum has been archived

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:

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:

{| bgcolor="#6da1d6" border="1" style="color:black; width:400px;"

! align="left" bgcolor="#6da1d6" colspan="5" scope="col"|Drug-related homicide rates as defined using differing criteria in four cities, 1990
|-
! bgcolor="#ffffff" rowspan="2" scope="col"|
| align="center" bgcolor="#ffffff" colspan="4"|Percentage drug-related
|-
! bgcolor="#ffffff" scope="col"|City 1
! align="center" bgcolor="#ffffff" scope="col"|City 2
! align="center" bgcolor="#ffffff" scope="col"|City 3
! align="center" bgcolor="#ffffff" scope="col"|City 4
|-
! align="left" bgcolor="#ffffff" scope="row"|Definitional criteria
| align="center" bgcolor="#ffffff"|36.0%
| align="center" bgcolor="#ffffff"|25.7%
| align="center" bgcolor="#ffffff"|39.0%
| align="center" bgcolor="#ffffff"|44.6%
|-
! align="left" bgcolor="#ffffff" scope="row"|Committed during commission of a narcotics felony
| bgcolor="#ffffff"|
| align="center" bgcolor="#ffffff"|x
| align="center" bgcolor="#ffffff"|x
| align="center" bgcolor="#ffffff"|x
|-
! align="left" bgcolor="#ffffff" scope="row"|Dispute between dealers
| align="center" bgcolor="#ffffff"|
| align="center" bgcolor="#ffffff"|x
| align="center" bgcolor="#ffffff"|x
| align="center" bgcolor="#ffffff"|
|-
! align="left" bgcolor="#ffffff" scope="row"|Offender under the influence of drugs
| align="center" bgcolor="#ffffff"|
| align="center" bgcolor="#ffffff"|
| align="center" bgcolor="#ffffff"|x
| align="center" bgcolor="#ffffff"|
|-
! align="left" bgcolor="#ffffff" scope="row"|Victim under the influence of drugs
| align="center" bgcolor="#ffffff"|x
| align="center" bgcolor="#ffffff"|
| align="center" bgcolor="#ffffff"|x
| align="center" bgcolor="#ffffff"|
|-
! align="left" bgcolor="#ffffff" colspan="5" scope="row"|Source: Data were obtained by the ONDCP Drug Policy Information Clearinghouse.
|}

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:
/* CSS equivalent of CELLPADDING, also, align text in every cell to the left */
.my-table td {
    text-align: left;
    padding: 100px;
}

20px_Rin_Tohsaka_Avatar.png Mathmagician ƒ(♫) 20:19 UTC, Tue, 10 July 2012

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. 20px_Rin_Tohsaka_Avatar.png Mathmagician ƒ(♫) 21:30 UTC, Tue, 10 July 2012
Fools open attachments. :) --Timeshifter 21:36, July 10, 2012 (UTC)

Found CSS for narrow cell borders

Return to top.

This page is very helpful:

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

creates narrow cell borders, and it is HTML-5 compliant. See:

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). 20px_Rin_Tohsaka_Avatar.png Mathmagician ƒ(♫) 23:48 UTC, Tue, 10 July 2012
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:
 table {
    border-collapse: collapse;
 
}
table td {
    border: 1px solid blue;
    padding: 4px;
}


 pecoes  00:32, July 11, 2012 (UTC) 
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 cellpadding.
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! --  pecoes  05:09, July 11, 2012 (UTC) 
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)

(Reset indent) 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.

 pecoes  18:27, July 11, 2012 (UTC) 

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. 20px_Rin_Tohsaka_Avatar.png Mathmagician ƒ(♫) 21:34 UTC, Wed, 11 July 2012
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)

Around Wikia's network

Random Wiki