HTML family tree styling at Wikipedia

Question

Wikipedia often has family trees incorporated into their articles. One example can be found here:

https://en.wikipedia.org/wiki/Monarchy_of_Belgium#List_of_Kings_of_the_Belgians

If I view the HTML source code for the above family tree, I fail to see how they keep the empty table cells from drawing borders.

Can someone point me to the styling code that controls the styling of the cells in this family tree? I'd like to reproduce a family tree, but simply cutting and pasting the <table> </table> contents fails. All I get is pretty much a huge grid.

But there is nothing in the HTML source for the tag that controls the visibility of the cell borders. E.g. — instrumentally, Jan 21 '16 at 14:50

Karl Dawson · Answer 1 · 2016-01-21T15:14:55.540

0

Using Google Chrome (for example), instead of right-clicking and choosing "View page source" choose the next option down "Inspect" to open the Dev Tools sidebar. You'll see the source code and the styles applied to each element, including those coming from style sheets and the inline styles they've applied directly to the markup.

Edit: I've extracted the markup and styles for you into a jsFiddle you'll have to condense all matching styles for each 'td' into one style declaration.

#TABLE_1 {
  color: rgb(37, 37, 37);
  height: 1651px;
  width: 1211px;
  perspective-origin: 605.5px 825.5px;
  transform-origin: 605.5px 825.5px;
  border-spacing: 0px 0px;
  font: normal normal normal normal 14px / 22.4px sans-serif;
  outline: rgb(37, 37, 37) none 0px;
}

etc etc

edited Jan 21 '16 at 15:14

answered Jan 21 '16 at 13:44

Karl Dawson

967
5
15

I've done as you've suggested, and compiled a list of all the styles, however, this only makes the table look worse than without any of the css code: – instrumentally Jan 21 '16 at 14:47
The jsFiddle CSS code only appears to work only for that one specific table (List_of_Kings_of_the_Belgians). I only used that as an example. Moreover, the original Wiki HTML has no "id" elements in their and tags. What you are doing is a considerable modification to the original HTML. I was hoping to be able to "borrow" the HTML from various Wiki family trees without having to insert new code into any of the "borrowed" cells. – instrumentally Jan 21 '16 at 17:03
Yes, I extracted the code using a tool that adds IDs as it's own internal reference - you'd have to do the donkey work of removing the IDs and spotting the similarities in the output CSS (After reducing the example by a considerable amount). By playing around with this reduced sample, You'll find how they styled some `td`s and not others... – Karl Dawson Jan 21 '16 at 17:08
>> By playing around with this reduced sample, You'll find how they styled some tds and not others...<< Unfortunately that doesn't help me. I'll have to outsource the task of "playing around" to a third-party since it is over my head. – instrumentally Jan 21 '16 at 17:47

score 0 · Answer 2 · answered Jan 21 '16 at 21:48

0

I eventually figured out what the problem was. In my HTML source I had linked to a default CSS file which I always use with all my HTML projects. Turns out, that CSS had code in it that drew black lines around every single cell.

answered Jan 21 '16 at 21:48

instrumentally

119
1
3
9

HTML family tree styling at Wikipedia

2 Answers2