HTML5-从0开始学习之table表格

谁借莪１个温暖的怀抱￠ 2022-05-03 03:28 176阅读 0赞

## 这次我们来学习制作网页中的表格，表格标签用<table>标签使用。接下来我们用一个例子来展示表格的效果。 ##

<body>
        <table border="1">
            <caption>成绩表</caption>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>英语</th>
                <th>数学</th>
            </tr>
            <tr>
                <td>ABJun</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>         
            </tr>
            <tr>
                <td>ABJun</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>         
            </tr>
            <tr>
                <td colspan="2">ABJun</td>
                <td>100</td>
                <td>100</td>           
            </tr>
            <tr>
                <td rowspan="2">ABJun</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>         
            </tr>
            <tr>
                <td>ABJun</td>
                <td>100</td>
                <td>100</td>      
            </tr>
        </table>
    </body>

### 显示效果如下： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70][]

## 表格是我们经常会用到的页内元素，现在来逐步解释每个标签的含义。 ##

### <table>标签：定义一个表格，表格内容在此标签中来写； ###

### <border>标签：如果不定义border属性的话表格是没有边框的，border=“1”设置表格的边框样式； ###

### <caption>标签：定义了表格的标题，如例子所示，标题为成绩表； ###

### <th>标签：定义了表格的头部，默认加粗着重显示； ###

### <tr>标签：表格中的行标签，<tr>中的内容代表这一行中的内容； ###

### <td>标签：表格中列标签，<td>中的内容代表这一列的内容； ###

### 在<tr>标签中使用<td>标签，效果就如成绩表第一行中所示； ###

## 接下来我们来讲如何合并单元格。 ##

### <colspan>标签：colspan标签能够合并列数，colspan=“2”就代表合并两列； ###

### <rowspan>标签：rowspan标签能够合并行数，rowspan=“2”就代表合并两行。 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70]: /images/20220503/217d769aad564afbadee4632b655f4b2.png