: The Table Row Element - HTML - MDN Web Docs - Mozilla

Trang chủ » Html Table First Column Background Color » : The Table Row Element - HTML - MDN Web Docs - Mozilla

Có thể bạn quan tâm

This example extends the basic table from the previous example by adding a header row as the first row of the table.

HTML

An additional table row (<tr>) is added as the first row of the table with column header cells (<th>) providing a header for each column. We put this row in a <thead> grouping element to indicate this is the header of the table. The scope attribute is added to each header cell (<th>) within this head row to explicitly specify that each header cell relates to all the cells within its own column, even though those cells are in the <tbody>.

html<table> <thead> <tr> <th scope="col">Symbol</th> <th scope="col">Code word</th> <th scope="col">Pronunciation</th> </tr> </thead> <tbody> <tr> <th scope="row">A</th> <td>Alfa</td> <td>AL fah</td> </tr> <tr> <th scope="row">B</th> <td>Bravo</td> <td>BRAH voh</td> </tr> <tr> <th scope="row">C</th> <td>Charlie</td> <td>CHAR lee</td> </tr> <tr> <th scope="row">D</th> <td>Delta</td> <td>DELL tah</td> </tr> </tbody> </table>

CSS

The CSS is nearly unchanged from the previous example, except for some additional styling to highlight the "header row" so that the headers of the columns stand out from the other cells.

csstr:nth-of-type(odd) { background-color: #eee; } tr th[scope="col"] { background-color: #505050; color: #fff; } tr th[scope="row"] { background-color: #d6ecd4; } table { border-collapse: collapse; border: 2px solid rgb(140 140 140); font-family: sans-serif; font-size: 0.8rem; letter-spacing: 1px; } th, td { border: 1px solid rgb(160 160 160); padding: 8px 10px; }

Result

Từ khóa » Html Table First Column Background Color