Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Html tables suggestions: Col elements, and css file changeup

Closed Beginner friendly
  • Is something wrong?
#46,100 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

A pull request for this has already been merged.

  • #3 by @Khogendrarupini — merged

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Documentation
Clarity
Mostly clear
Activity status
Active
Tech stack
css, html, markdown
Domain
documentation

Research direction

Read files/en-us/learn_web_development/core/structuring_content/html_table_basics/index.md and inspect the “Grouping columns with <colgroup> and <col>” section and its CSS examples. Check how the earlier table styles interact with the column styles, then clarify how rows and columns relate and explain why the example colors may not appear. Done when the section addresses both reader confusions accurately.

Written by the indexing model from the issue text.

Description

Content:Learn:HTML needs info
MDN URL

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics

What specific section or headline is this issue about?

"Grouping columns with <colgroup> and <col>"

What information was incorrect, unhelpful, or incomplete?

1- How rows and cols relate to each other
2- Why the css wasn't appearing on my html doc browser render

What did you expect to see?

1- I think it'd be helpful to say something of this sort in the beggining of the section:
"A table can be completely expressed, as just a sum of rows and row cells."
Then, add the commentary of, "For targeting purposes though, for example for styling, we group the content in columns", and then continue as is.

2- My css wasn't showing the colors that the css in that section should be showing, and it's because I pasted it on the css file we were working on from the beggining of the page. Claude found the issue, the column was getting painted, and then the individual cells were painting over that. What I had to do was make the original colors transparent, and then the colors that came below in the css document could appear.
Here's the css of that section I'm talking about:

.column-background {
  background-color: #97db9a;
}

.column-fixed-width {
  width: 40px;
}

.column-background-border {
  background-color: #dcc48e;
  border: 4px solid #c1437a;
}

And here's the fix, to the css that came from above:

td,
th {
  border: 1px solid rgb(190 190 190);
  padding: 10px 20px;
}

th {  
  background-color: rgb(0 0 0 / 0.08);   /* ≈ rgb(235 235 235) on white */
}

td {
  text-align: center;
}

tr:nth-child(even) td {
    background-color: rgb(0 0 0 / 0.02);   /* ≈ rgb(250 250 250) */
}

tr:nth-child(odd) td {
  background-color: rgb(0 0 0 / 0.14);   /* ≈ rgb(220 220 220) */
}

0 0 0 is RGB black, and the decimal numbers is transparency proportions, basically doing "black mixed with alpha channel in different proportions, with a white/green/wtv color background" instead of "solid grey/white/black"

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata
Page report details
Dominant language
Markdown
Stars
11.1k
Forks
23.3k
Avg merge
2d 14h
Merged PRs (30d)
214

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mdn/content

All issues in mdn/content

Similar issues

More Documentation issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.