CODEWITHSUNDEEP
htmlcss
Jason
Jason

Reputation: 1817

CSS / HTML - column width formatting

I have two pieces of code. I was expecting these to have the same result, but no luck. Can someone explain this to me?

<table border=1px>
  <tr>
    <td width=20%>test1</td>
    <td width=80%>test2</td>
  </tr>
</table>
<style>
    table { width:100%;}
    td.1  { width:20%; }
    td.2  { width:80%; }
</style>

This works as I expect. The first column is 20%, the second is 80%.

<table border=1px>
  <tr>
    <td class="1">test1</td>
    <td class="2">test2</td>
  </tr>
</table>
<style>
  table { width:100%;}
  td.1  { width:20%; }
  td.2  { width:80%; }
</style>

This version shows column as 50/50.

Upvotes: 0

Views: 86

Answers (1)

simeg
simeg

Reputation: 1879

Change the numbers 1 and 2 to more appropriate names. CSS names cannot begin with numbers.

<table border=1px>
  <tr>
    <td class="twenty-percent-width">test1</td>
    <td class="eighty-percent-width">test2</td>
  </tr>
</table>
<style>
  table { width:100%;}
  td.twenty-percent-width  { width:20%; }
  td.eighty-percent-width  { width:80%; }
</style>

Read more here.

And for good programming practices you should never name variables, names, etc starting with a number

Upvotes: 3

Related Questions