All about table tag / min-width is explained in point 5 and max-width is explained in point 8

1) Main tags for creating a table 

 

2) Thumb-Rules for creating a table:

i) To see a row we have to create a row by using <tr> tag.

ii) Without <tr> tag we cannot directly give a <th> or <td>

iii) <th> and <td> can only come inside <tr> tag.

iv) All the columns definition goes in <thead> tag. <thead> stands for table header.

v) Columns will fundamentally be the first row of the table.

vi) <thead> is basically one big row where we can create columns. Before creating columns we have to create rows by <tr>  tag.  

vii) Now inside the <tr> tag we can give any number of columns using the <th> tag.  <th> tag will contain the name of the columns.

viii) All the data of the table goes into <tbody>.

ix) The data should be inside <tbody> , inside <tbody>, we need to create rows to contain our data using <tr> tag. And inside <tr> we can fill any number of data using <td> tags. <td> i.e., table data tag can be used to fill actual data.

3) Small example of whatever was discussed above. In this example we have 3 columns and not given any body to fill data.

The output is quite simple and we get 3 columns ( columns is a big row itself) . It doesn't quite look like table yet because we haven't given the border.

Now by giving the table some border using CSS the output will be.

Now after giving the table a border, we can ourselves confirm that columns is nothing but a big Row itself.

4) Now let's give our table give a body to fill in the data for each column heading. In this example our table body will only have 1 row.

As we can see we have only given one row in our table body part. Now lets only zoom in the tbody part:

And the output will be:

5) Let's take an example of table with two rows. In this example we can see we have two rows in our table body, one for John and the other for Jane.

** Important to revise and look into continuously 

Now lets give our th ( columns name)  min-width property of 200px in the CSS. By giving min-width property of 200px to our columns name, the width of the column will be minimum 200px, it will not go less than that, but it can go more than that. Suppose below the min-width if we would have given width: 400px to the th, then the width of th would have been 400px, but if we gave width as 150px then min-width would have applied and our th element would be 200px only. min-width specifies minimum width of an element below which the width of that particular element cannot go.

As we can see in our output, since the width of our th(columns) elements was < than 200px , the min-width:200px; , got applied and the width of th has increased too 200px and we can compare it to the previous output above by scrolling up.

6) Now let's give our th( columns) and td( data to the columns) some border too in CSS , so that it looks like an actual table.

Some padding was also given to our td but that is not written in the CSS code above. So after given our th and td some border of 1px solid #ccc, the output looks like an actual table.

7) Now let's learn about border-collapse property in CSS. AS we can in our previous output that the borders have a white spacing between themselves, that is because of the border-collapse: separate; default value of the property.

Let's align our td text to the center and remove that white spacing from the borders by using border-collapse: collapse; property.

We can see in the output that the white spacing between the border has collapsed and converted into a single line. And the text has been aligned to center.

8) Now let's learn how to give different colours to odd and even rows of our table by using the nth child selector. Also we have given max-width of 400px to th(columns) . That means our th(columns) width cannot be more than 400px and not less than 200px because of min-width: 200px. The width will lie b/w  200px<= Width <= 400px ( b/w 200px to 400px)

As we can see in our output the even row is sky blue, odd row is orange and column row is grey, As per we have mentioned in our CSS.

9) Colouring only a particular cell in a row different colour

We can see in our output that 2nd row 3rd cell is brown in colour exactly like we have mentioned in our CSS file above.

9) Complicated table layout/ structure and how to achieve them. By Using colspan and rowspan attribute.

We can see that we have 5 rows and 4 columns. The 3rd column is divided into 2 smaller columns and each rows are divided into two smaller rows. We will achieve this output by using colspan and rowspan attribute of table.

By using colspan= 2 in our 3rd th( 3rd column) the 3rd column has divided into two smaller columns.

By giving rowspan=2 to each td , each td has been further divided into 2 smaller rows.