Set width of <tr> or <td> in HTML5

Asked

Viewed 17,697 times

2

I need to set the width of a column in a table, but the width (inline) HTML5 is not supported, according to documentation: HTML Tag

In this case, it cannot be done inline ? What options ?

As in email marketing, everything should be inline, and now !?

html css

  • No problem young man, now it’s easier to understand even rss. I’ve even edited my answer with your solution. If you want to work with an external CSS you can, then use a compiler that takes your css and puts it right in the tag as I did in the example. Right here you have an online tool that helps with this, it takes your . css and puts the tag for you in the whole file. http://divtable.com/table-styler/

2 answers

2

Just an addendum, prefer to get direct references on
https://www.w3.org/ or in the
https://developer.mozilla.org
are more reliable

Back to your question, why not use the css? The attribute width is fully supported by the element TD. The HTML5 does not encourage to use these attributes in tags, see the element font which has been discontinued, all to focus styles where they should be, in the CSS

See this example of how to use in CSS simply:

table { border-collapse: collapse;}
th, td { border: solid 1px; padding: 0 }
td:first-child { width: 200px  }
td:first-child + td {  width: 150px }
td:first-child + td + td {  width: 120px }
<table>
      <tr>
          <th>Primeira 200px</th>
          <th>Segunda 150px</th>
          <th>Terceira 120px</th>
      </tr>
      <tr>
          <td>texto</td>
          <td>texto</td>
          <td>texto</td>
      </tr>
  </table>

Note that I used the selector first-child + td to apply a different style to each td in sequence of the table.

  • Not that w3schools is an excellent source. But in this case the problem I think was not the source, but the understanding of the content of the page. There talks "All layout Attributes are Removed in HTML5." removed from HTML5 not CSS.

  • It is still true, that the HTML5 discontinued format attributes on tags, but that’s why I don’t really like the reference of w3schools :) W3.org is very detailed and hard to read sometimes, so I prefer Mozilla.org, and there’s still a lot of English. But I agree with you that the way it was written there is not quite clear

  • Tb use the MDN reference more than W3C, but w3school has some practical examples that sometimes help understanding. [] s

  • Sorry guys, I didn’t express it right. My question is specific to the style in the tag. I already edited the question !

  • Got it @RBZ, in which case just use the style: width on the tag. The business of HTML5 was to remove only style attributes such as width and height but style is fully functional

1


EDIT:

To do the style straight in the tag you can use the style="" to put the width

It’ll stay that way:

<table border="1">
      <tr>
        <td style="width:100px">100px</td>
        <td style="width:200px">200px</td>
      </tr>
    </table>

RBZ believes that in this link the source refers to width right in the type tag: 

<td width="100px"> isso é errado mesmo!

Note that all link attributes are tag properties <td> as colspan, nowrap, align etc. This does not refer to width of the CSS!

Words from the Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

Usage Note: Do not use this attribute, as it has been deprecated. The Rules should be defined and Styled using CSS. Use the width Property Instead.

That is, use the width by CSS. As in the example below.

.gg {
  width: 100px;
}
.ggg {
  width: 200px;
}
<table border="1">
  <tr>
    <td class="gg">100px</td>
    <td class="ggg">200px</td>
  </tr>
</table>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.