开发者

What is the right way to size html columns?

开发者 https://www.devze.com 2023-02-02 08:44 出处:网络
Simple question, I was wondering, what in 2011 is the right way to size html tables? (containing tabular data, of course!)

Simple question, I was wondering, what in 2011 is the right way to size html tables? (containing tabular data, of course!)

Should the following still be the way to go?

<tr>
    <th width="45%">Name</th>
    <th width="10%">Author</th>
    <th width="20%">Description</th>
    <th width="开发者_开发百科10%">Rating</th>
    <th width="15%">Download</th>
</tr>

Or would it be better to give each column an ID (or class) and set its width with CSS?

Thank you for your input!


You can use col or colgroup for that purpose.

<table>
  <col class="x"/>
  <col class="y"/>
  <col class="z"/>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

...and apply styles to the classes:

col.x {
   ...
}


In 2011? From about 2000 onwards it was the better approach to use class-names and CSS styles to give table-cells their width.

Unless they're all the same width, in which case just use:

th /* or td */ {
    width: 20%;
}

You could, conceivably, use nth-child too:

tr th:nth-child(1) {
    /* styles the first th of the tr */
}

JS Fiddle demo, using nth-child() css.


I've taken to using colgroup and col tags, like this:

<table>
    <colgroup>
        <col width="45%"></col>
        <col width="10%"></col>
        <col width="20%"></col>
        <col width="10%"></col>
        <col width="15%"></col>
    </colgroup>
    <thead>
        <tr>
            <th>Name</th>
            <th>Author</th>
            <th>Description</th>
            <th>Rating</th>
            <th>Download</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>


My personal preference is to use the width attribute on column tags.

<table>
    <col width="15%"></col>
    <col width="20%"></col>
    ...etc...

It keeps the presentation part out of the table content, so to speak.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号