table 样式

在CSS中设置表格样式，可以通过以下几种方法：

  1. 直接在HTML中使用style属性 ：
    <table style="border-collapse: collapse； width: 100%；">
        <tr>
            <td>数据1</td>
            <td>数据2</td>
        </tr>
    </table>
    ```

2. **在HTML中使用内嵌样式表** <b class="card40_249__sup_a7f6" data-sup="sup">1</b>：

```html
    <!DOCTYPE html>
    <html>
    <head>
        <style>
            table {
                border-collapse: collapse；
                width: 100%；
            }
            td, th {
                border: 1px solid black；
                padding: 8px；
                text-align: left；
            }
            tr:nth-child(even) {
                background-color: #f2f2f2；
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>标题1</th>
                <th>标题2</th>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
            </tr>
        </table>
    </body>
    </html>
    ```

3. **在外部CSS文件中定义样式** ：

创建一个名为`styles.css`的文件，并在其中定义样式：

```css
    table {
        border-collapse: collapse；
        width: 100%；
    }
    td, th {
        border: 1px solid black；
        padding: 8px；
        text-align: left；
    }
    tr:nth-child(even) {
        background-color: #f2f2f2；
    }
    ```

然后在HTML文档中引入该CSS文件<b class="card40_249__sup_a7f6" data-sup="sup">1</b>：

```html
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <table>
            <tr>
                <th>标题1</th>
                <th>标题2</th>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
            </tr>
        </table>
    </body>
    </html>
    ```

4. **使用Bootstrap等框架的预定义类** <b class="card40_249__sup_a7f6" data-sup="sup">7</b>：

Bootstrap等框架提供了预定义的表格样式类，可以直接使用<b class="card40_249__sup_a7f6" data-sup="sup">1</b>：

```html
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <table class="table">
        <thead>
            <tr>
                <th>标题1</th>
                <th>标题2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
            </tr>
        </tbody>
    </table>
    ```

### 表格样式示例<b class="card40_249__sup_a7f6" data-sup="sup">8</b>

以下是一个综合了多种样式的表格示例：
Top
×
×