Bootstrap basic CSS-table (Tables)

Source: Internet
Author: User

Standard structure label description <table> used to wrap table-formatted data <thead> to hold table header rows (<tr>) to identify table columns, <tbody> to accommodate table rows (<tr>) <tr> A group of cells in the row (<td> or <th>) <td> the default table cell <th> is used for the column header (or row, special labels must be placed in the <thead> label. <Caption> description or abstract of table usage, which is very useful for screen readers (visually impaired reading software) [html] <table> <caption>... </caption> <thead> <tr> <th>... </th> <th>... </th> </tr> </thead> <tbody> <tr> <td>... </td> <td>... </td> </tr> </tbody> </table> the style rows are separated by a horizontal line by default. You only need to add. table [html] <table class = "table">... </Table> you can add any of the following types after the. table.. Table-striped can set the background of an odd number of rows to Gray. [Html] <table class = "table-striped">... </Table>. table-bordered can display borders. [Html] <table class = "table-bordered">... </Table>. table-hover can gray the background of the row that you hover over. [Html] <table class = "table-hover">... </Table>. table-condensed can reduce the row spacing. [Html] <table class = "table-condensed">... </Table> the optional class of a row uses the following class to change the background color of the row to express a certain meaning. Add. success,. error,. warning,. info to <tr>. [Html]... <tr class = "success"> <td> 1 </td> <td> TB-Monthly </td> <td> 01/04/2012 </td> <td> Approved </ td> </tr>...

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.