html - Is this the best method to create this table? (fiddle) -
i want create table that fiddle
i'm wondering if current code best way create appearance?
html:
<div id="wrapper"> <div id="margin"> <table width="720" border="1" cellpadding="0" cellspacing="0"> <thead> <tr> <th width="95" valign="top" class="style1"></th> <th width="321" valign="top" class="style1">column a</th> <th width="369" valign="top" class="style1">column b</th> <th width="331" valign="top" class="style1">column c</th> </tr> </thead> <tbody> <tr> <td width="95" valign="top"><p>row a</p></td> <td width="321" valign="top"><p>content</p></td> <td width="369" valign="top"><p>content</p></td> <td width="331" valign="top"><p>content</p></td> </tr> <tr> <td width="95" valign="top"><p>row b</p></td> <td width="321" valign="top"><p>content</p></td> <td width="369" valign="top"><p>content</p></td> <td width="331" valign="top"><p>content</p></td> </tr> </tbody> </table> </div> </div> css:
p, em, font, table, tr, th, td, thead, tbody, tfoot { font-size: 100%; font-family: inherit; font-weight: inherit; font-style: inherit; line-height: inherit; vertical-align: baseline; border: 0; outline: 0; padding: 0; margin: 0; } table { table-layout: auto; border-collapse: separate; border-spacing: 0; empty-cells: show; } body { font-family: 'alef', serif; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #wrapper { border: 1px solid #000; width: 940px; background-color: #ffc; min-height: 632px; position: relative; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; } .style1 { background-color: #03c; padding-bottom: 14px; color: #ffffff; font-weight: 400; font-family: 'open sans'; vertical-align: middle; } #margin { margin-bottom: 40px; margin-left: 30px; margin-right: 250px; margin-top: 40px; } td,th { color: #678197; border-bottom: 1px solid #903; border-left: 1px solid #903; padding: .3em 1em 2em 1em; text-align:left; } tr:nth-child(even) { background-color:#ccc; } table { border-top: 1px solid #903; border-right: 1px solid #903; background-color: #f4f2f3; } questions example:
is proper use of
thead,th,tbodytags?do have apply
class="style1"each td? (if applytr, not effect font correctly.is right way leave blank cell @ top left corner?
should define
border="1" cellpadding="0" cellspacing="0"in css instead?i want table's width fixed, should indicate in html (like now) or css?
what recommend cell's width? should indicate them on every cell? don't make difference here anyway (you can see total width bigger whole table's width) i'm not sure here. i'm going have changing amounts of text in each cell.
is right way create red border between cells , table? (define right , top
table, , left , bottomtd)
thanks!
my thoughts/answers
- they seem correct usage tags
you don't have create specific classes each td or tr long identify table. example, have:
<table id="myuniquelyidentiedtable"> <tr> <th>column a</th> <th>column b</th> <tr> .... </table>
and in css, like:
#myuniquelyidentifiedtable th{ ... } #myuniquelyidentifiedtable td{ ... } etc.
3) tend specify blank cross-browser compatability semantically, there nothing wrong it.
4) that; don't remember them being hard not straight (1 1) conversion.
5) restricting width can wrap table container , restrict container width. i.e.
<div class="tablewrapper"> <!-- table here --> </div> // in css .tablewrapper{ width: 400px; } .tablewrapper table{ width: 100%; } 6) cell's width, typically set on ths not tds. if possible, can give related ths name (i.e. <th class="single-width">) , style width css .single-width{ width: 100px; }
7) not use approach. set background colour of table red , background of ths , tds different. cellspacing , border setting give necessary border colour. (this old-school, works - there other ways style tables well)
Comments
Post a Comment