My first table!

HTML & CSS
1

I’m having my very first attempt at creating a table, and leaving aside what I seem to remember about not being SEO friendly (I will change things later) I wonder if you could help me reduce the width of the 1st and 3rd cells. How do you differentiate the cells in a row?

I tried width in front of td, but just read that it is not supported in html5. So, how do I differentiate cells within the same row in css?

http://pintotours.net/Zork/Table.html

Thank you

2

You can use selector with :nth-child for that:

/* make first cell in row 80px wide */
tr td:nth-child(1),
tr th:nth-child(1) { width:80px; }

/* make third cell in row 100px wide */
tr td:nth-child(3),
tr th:nth-child(3) { width:100px; }

Or, you can add classes for your <th> tags and set width for them. When you change width for <th> in that case whole column will be resized as well.

3

Hi megazoid

Magic! Many thanks!

The only problem is that it does not seem to work with IE9. I’m not sure about IE8.

Any work-arounds?

4

For IE9 you can add this to your <head>:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

IE8 doesn’t support pseudoselectors like nth-child at all, it can be fixed with JS only.
If you care about IE8 use classes instead:

 <table>
      <thead>
           <tr>
                <td class="col-1">First</td>
                <td class="col-2">Second</td>
                <td class="col-3">Third</td>

CSS:

.col-1 { width: 80px; }
.col-3 { width: 100px; }
5

Perfect!

IE8 will have to wait as I want to get this bit on the road and do not have an IE8 computer with me now.

Many, many thanks

6

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