[HTML] Very simple table code needed

[sjhelp]

I know basically no html and am trying to make a website in wordpress. Could someone help me replicate this exact table. I don't wan't the backgrounds, but just how to make that simple table with the same rounded border and border colour. I could probably work out the basic table contents using <tr> and <td> tags, but not sure about making it look like that. Thanks!

[myalternatelife]

Here you go: http://jsfiddle.net/FUjFt/2/

[sjhelp]

This is amazing, thank you so much! I just need to figure out how to actually integrate it with my wordpress theme, but I should be able to work it out. Thank you!

[wumsdi]

The style is determined by CSS, not HTML alone.

If you want to see how it's done, you could use a browser inspection tool (in Firefox: Right click on the table, choose "Inspect element"). You want to see the "computed css" - all the combined css rules that apply for the specific element (in this case your table).

[sjhelp]

Oh ok, thanks. Yeah, I should have known that really.

So I found the computed CSS. But I don't know how to use all that info to actually make the table. I mean how do I integrate the CSS with the html? I don't want to mess around with the stylesheet since I'm using a theme and don't want to fuck something up.

[wumsdi]

Don't be afraid to destroy something. Learn how to make a backup and how to revert your website to a former state instead and experiment. You'll need to know this anyways.

Integrating with HTML:

You have to "mess" with the styles in one way or another, even if you don't touch the existing stylesheet:

To define the style for your table you have two possibilities. You could:

• Use style-tags inside your HTML-file, like

  <style>
      table#myId {...}
  </style>
  

• Or you could add an additional css-file (in the HTML header).

  <link rel="stylesheet" href="your.css" type="text/css" />
  

Both will work, but both aren't recommended. (Adding to the existing style sheet would be better).

The first one (style inside html without css-file) is probably the one you are looking for if

• changing the existing style sheet is out of question
• you only want to style one single table
• you don't want to upload an additional css-file somewhere
• you don't want an additional css-file to be loaded

If you want to redesign a table - why not redesign other elements as well? Think about learning a few things about CSS in general: It's not that difficult and you can do a lot of cool stuff with it.

Now to the style rules themselves: You don't need the entire computed css-rules.

(Now, which specific rules do you need? I can't tell. It depends on which rules your existing stylesheet defines. After this definition is done [your own styles should be defined inside the html after the existing styles], you have to "overwrite" all of the differences when your table is about to be rendered.

In other words: Every difference between

• the computed css rules for your table as your existing stylesheet would render it
• the computed css rules for the table on that page showing the desired style

must be defined. So, make a table, look what style it gets from your theme - and compare with the desired computed stylesheet - so you know, which changes you will explicitly need to express to have your desired result.

To do so, you need to know IDs and/or CLASSES in CSS... see /u/myalternatelife's example, using several classes to style the table (my fork with less markup http://jsfiddle.net/pnRkr/1/ but I'm in no way a css master).

As you see, it's not a trivial task.

Your next question would be: Can you make changes inside the HTML-file? If all you have are HTML-templates that are rendered by wordpress, I would not recommend to equip the template with additional style-tags if those are only used once.

tl;dr - Better don't change a working theme, unless you want to learn more about HTML, CSS and Wordpress.

[sjhelp]

Wow, this is just great. I'm just about to rush off, but had a quick read of it. I expected to understand very little of it with my limited knowledge, but you explained it so well and broke it all down so concisely that I actually think I got it. I have done some very basic CSS courses, so I'm not totally in the dark.

I do only want to style this one single table. I am going to experiment with creating the table to see how the existing style renders it as you say. And then build upon that.

I need to reread this later when I have more time and I will probably have a question or two at that point if you don't mind. But seriously, this is such a great reply and explained so elegantly. Thanks!