CSS and tables

[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?

[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.

[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?

[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.

[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.

[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;
}

[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.

[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.