Responsive Table Html Code Request

HTML & CSS
1

I am looking for a responsive table html code where I can adjust the column widths and cell colors. Basically, I would like the table to consist of 4 columns and 7 rows with the left side column wider than the rest. Is any one aware of how I can accomplish this? Thanks.

2

What sort of data are you going to have in this table?

Unless you give them fixed widths, columns will respond to their contents in any event.

3

Thank you for your response. I didn’t know that deleting the fixed widths could increase the column width. My knowledge of html and coding is very limited. Would this affect the responsiveness?

I would be entering text in the table fields. I have been playing around with this code. I see that the colors per cell are fixed as well. How can I change the colors on the left hand column? Thanks…

4

By default tables “shrink to fit” the content. The column relative wdiths are proportional to the content within each column.
So for example if column one just had numbers 1 to 10 it would be quite narrow, if the next one had a name in it, that would be a bit wider, if the third column had a whole sentence that would be much wider.
This makes table naturally responsive to an extent. As the window narrows, so will columns. But the minimum width a column will go by default is defined by the longest “word” (string un-broken by a space) the column contains. It can be further reduced if required by adding hyphenation vis css.
But often if a table has many columns, it just can’t squeeze enough to fit on a mobile screen.

That example is a little different and misleading as it is lists, not tables.
Maybe give an example of the data you are presenting to decide if it is tabular or list based.
Generally a list in one dimensional data, a single row or column of related data. Whereas table shows two dimensional data where multiple rows and columns relate and may be cross-referenced.

5

That code doesn’t use tables, it is using unordered lists, which appear to be designed to be responsive.

You can change the background colour of the list items and/or applying a class to the items you want to change.

6

Thanks, Sam. Basically, the left column would contain a sentence or two. The last 3 columns would be very similar to my example link, a word or two per cell.

7

Can you please give me an example as to how to do this? Thanks.

8

You are coloring them this way: li class=“grey”
The CSS then is applied to that class:

.price .grey {
background-color: #eee;
font-size: 20px;
}

If you want a different color, then change the class name (gray) and apply new colors to that class (background-color: #666).

9

Thanks, StevenHu. The problem is that changing this css affects the color of multiple cells at once. But, how can I change the colors of specific cells in a column? What I would like to do is have the left hand column a different color or color scheme than the rest of the columns.

10

Just apply the new class (with the new colour) to whichever items you want to change the colour of.

1 Like
11

I’m going to step out on a limb here and guess that @bsfns5 is not sure how to do that yet.

The fact that they were unable to distinguish an html table from a ul leads me to believe they are not familiar with HTML or CSS yet.

That being the basis of my assumption I would suggest a crash course with the basics at these MDN links.

Getting started with HTML
Introduction to CSS
Class selectors

2 Likes
12

Do I apply this to the css or html code? Again, my knowledge of coding is extremely limited.

13

The cells that are being colored grey are the ones with the class of grey applied to them: li class=“grey” Those are selectively colored. You’ll notice that not all the cells are grey, right?

So do this.

  1. Change “grey” to “red” in one of the instances.
  2. In the area right above .price .grey type the following:
    .price .red {
    background-color: red;
    font-size: 20px;
    }
  3. Now review and you’ll see that you’ve selectively changed one of the li cells to red by applying a class to it.

This is very basic use of applying styles to HTML via CSS. I recommend you read the links in post #11 and use your assignment to practice the knowledge on.

14

This is actually a good example of how not to name classes, as in using colour names or specific visual descriptions. Better to use a name that describes what the content represents.
When you name it after the colour, and subsequently decide to re-style and use another colour scheme, you find yourself editing both the html and the css, which kind of defeats the whole object of using css, or else you can leave misleading and confusing class names around the place.
It would actually be more maintainable to just to use style="color:red", which is not something I advocate at all, as in-line styling is horrifically unmaintainable. It’s just that badly named classes can be even worse.

1 Like
15

I hesitated naming the class “red” because it should named after the function or something. But for practice purposes, it’s fine. Still, it’s a good thing to bring up.

16

I just mention it because the OP is a beginner in css and it’s one of those things that I think everyone has done at some point as it’s such an easy trap to fall into.

1 Like
17

For the record, I agree with you 100% that naming the class a color is poor.

18

Thank you so much for your responses. I am now using a different table that better meets my needs.

19

Please could you share the code, or link to an example, for the benefit of anybody else with a similar requirement, @bsfns5?

20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.