Member Avatar for skald89

I have never really used tables and especially not in a css file.

I just want to know the basics of tables and making them in css.
Also once I do make it in a css file how do I name it so I can use it in a html file?

  • 5 Contributors
  • 7 Replies
  • 117 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by teedoff

Dani AI

Generated

Quick practical guide to styling HTML tables and reusing those styles across pages.

Create a CSS file and link it in the document head, then attach a class to the table to reuse styles:

<link rel="stylesheet" href="css/tables.css">

<div class="table-wrap">
  <table class="data-grid">
    <caption>Order summary</caption>
    <thead>
      <tr><th scope="col">Item</th><th scope="col">Qty</th><th scope="col">Price</th></tr>
    </thead>
    <tbody>
      <tr><td>Apple</td><td>3</td><td>$1.00</td></tr>
    </tbody>
  </table>
</div>

Example CSS (different selectors than earlier replies):

.data-grid { border-collapse: collapse; width: 100%; table-layout: fixed; }
.data-grid th, .data-grid td { padding: 8px 10px; border: 1px solid #e0e0e0; vertical-align: middle; }
.data-grid thead th { background: #f4f4f4; font-weight: 700; }
.data-grid tbody tr:nth-child(even) { background: #fafafa; }

/* simple responsive: allow horizontal scroll on small screens */
.table-wrap { overflow-x: auto; }

Useful extras not mentioned earlier: use <colgroup>/<col> to set column widths or to style whole columns, or target columns with td:nth-child(n) for layout. Add <caption> and th scope="col" for screen-reader clarity. Tables are for tabular data—prefer CSS Grid/Flexbox for page layout as and suggested; ’s tips on spacing and contrast are good practice when styling cells.

Troubleshooting checklist: confirm the <link> is in the <head>, class name spelling matches, clear cache, and inspect rules in DevTools to see if a more specific selector is overriding yours. For selector rules and how specificity works, see the MDN reference on CSS specificity: CSS specificity. For element details and semantics, see MDN’s table element docs: HTML table element.

Recommended Answers

All 7 Replies

Member Avatar for scrappedcola

Tables aren't used in css. Css is just for layout attributes. Tables are html elements (ie. the layout). Information on tables can be see here.

Member Avatar for skald89

Tables aren't used in css. Css is just for layout attributes. Tables are html elements (ie. the layout). Information on tables can be see here.

so I cant put them in my css like a <div> tag?

Lets say you want to create multiple styles of tables in your website, you would o that all inline/ in the html?

Member Avatar for scrappedcola

Sorry, Your question wasn't clear. You reference you styles for the table just like you would any other element. There isn't anything special about them. To define styles for your table without using classes or id's you can do:

table{
  width: auto;
}
table tr td{
  background-color:red;
  border:1px solid green;
}

To reference with id's class can either reference with or without listing the element

.fredTable
{
   width: 90px;
}
table.fredTable
{
   width:99px;
}

Just note that each way you define your styles will have their own scope of specificity and if you are not careful you can overwrite a style if another defined style is more specific.

Member Avatar for designgene

Let me share some rules in order to help you understand use of tables in CSS so that you can develop a better website design:

1. Tables love space. Set the width of tables carefully, according to the content. If you don’t know the perfect width, simply set the width of the table to 100%. Tables look nicer when they have “overwidth”, and when it comes to tables too much width is definitely better than too little width.
2. Cells need some padding. Sure, each table cell relates to each other. But it doesn’t mean that we have to pull them too close, right? Define some space between the cells, crammed up table cells are so much harder to read.
3. Treat tables the way you treat content. Tables are read similarly to the way we read text — except it’s harder and it takes more time to read a table. So be careful with the amount of contrast you are giving to your table. Use soft colors — it’s easier for the eyes. Don’t treat your table like it’s a graphical decoration. Make sure that the style you apply to it makes the content more readable, not the other way around.

Edited by Ezzaral because: Snipped advertising link.
commented: Nice design hints! +2
Member Avatar for skald89 
table{
  width: auto;
}
table tr td{
  background-color:red;
  border:1px solid green;
}

Whats the difference between TR and TD?

So I would just say

#fredtable{
  width: auto;
}
table tr td{
  background-color:red;
  border:1px solid green;
}
Member Avatar for RoyalElite96

I wouldn't use tables at all. They are outdated.
But you could use <div> and display: table / table-cell / block-inline.
Just a suggestion.

If really want to use tables then place <div> inside or around it.

Member Avatar for teedoff

Tables for page layouts are outdated and not recommended. Read this article.

But to answer your last question, <tr> represents a row in the table. <td> represents a column.

Tables should be used simply for columnar data, such as displaying data returned from a database query. I also like to use tables to neatly align and display forms.

Edited by teedoff because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.