Help styling HTML table

[UpstateLeafPeeper]

Below is a sample HTML table that I created. And I would appreciate some advice on how to best style things so my CSS is clean.

First here is the code…

        <table>
          <!-- Column Groups -->
          <colgroup>
            <col id="feature">
            <col id="guest">
            <col id="basic">
            <col id="premium">
            <col id="premium+">
          </colgroup>
          
          <!-- Column Headings -->
          <tr>
            <th>Feature</th>
            <th>Guest</th>
            <th>Basic<br/>Access</th>
            <th>Premium<br/>Access</th>
            <th>Premium<br/>+ eBook</th>
          </tr>
          
          <!-- Rows -->
          <tr>
            <td>News</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
          </tr>
          <tr>
            <td>Articles</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
          </tr>
          <tr>
            <td>Opinion</td>
            <td>-</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
          </tr>
          <tr>
            <td>Interviews</td>
            <td>-</td>
            <td>-</td>
            <td>X</td>
            <td>X</td>
          </tr>
        </table>

Questions:
1.) How do you name IDs and Classes?

someClass
some-class
some_class
someclass
something.else

2.) Should I give my table an ID/name so that all styles within built off of that unique name?

3.) How do I style my colgroup so that the “basic” column is one color, the “premium” column another color and so on?

4.) If I want the “feature” column left justified and all other columns centered, what is the best way to do that?

5.) What is the best way to adjust column widths?

6.) What is the best way to add borders (e.g. outside, columns, possibly cells, etc)?

Thanks.

[Stomme_poes]

The answers to these are going to be peoples’ personal preferences, so I’m assuming that’s what you’re looking for (what do people like to do?).

1. Pick any one and stick to it, except the last one as the dot (.) is a class delimiter in CSS rules. Since I’m almost always working with someone else’s CSS nowadays, I just try to do whatever they do.
2. You could, but see if a unique class name is good enough, in case you ever find you want another table to start off with very similar styles. I restrict id-token use to where I need it for things like hooking up ARIA attributes or creating destinations for URLs (in-page skip links and the like).
3. I seem to recall that styling by colgroups/cols still sucked, but you might want to go Googling/DuckDuckGo-ing to see if that’s still the case. What I’ve done in the past is used CSS nth-child numbering, which simulates a column style.
4. Same thing, I’ve used nth-child in the past. Or in this case, :first would similarly work. The table’s th’s and td’s are told to center in a single CSS rule, then override that for the one who is different.
5. I’ve found this is sometimes trickier than made sense to me, but I’ve had the most success by setting widths and things on the table column headers. However a column might get stretched by unbreakable content inside any cells of a column. break-word or soft-hyphens might be your friend. Be aware browsers seem to have different opinions on whether they want to break on a slash in URLs. Some won’t.
6. Your code doesn’t have thead or tbody elements, and you may want to have them and try using them for styling. Be aware that when borders are collapsed, sometimes some browsers will not want to show a border along a row at times (and this may change based on browser zoom).