html用table标签制作表格

雨点打透心脏的1/2处 2022-04-13 11:10 434阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JveHpoYW5n_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table {
                border-collapse: collapse;/*表格样式。如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性*/
            }
    
            td,th{
                width: 100px;
                height: 40px;
                border: 1px solid ;
                font-size: 12px;
                text-align: center;
            }
            tr:nth-of-type(odd){
                background-color: lawngreen;/*每隔一行设置行颜色*/
            }
        </style>
    </head>
    <body>
    <table>
    <tbody>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>地址</th>
            <th>爱好</th>
        </tr>
        <tr>
            <td>AA</td>
            <td>BB</td>
            <td>CC</td>
            <td>DD</td>
        </tr>
        <tr>
            <td colspan="2">EE</td> 
            <td>GG</td>
            <td rowspan="2">HH</td> 
        </tr>
        <tr>
            <td>II</td>
            <td >JJ</td>
            <td>KK</td>
    
        </tr>
        <tr>
            <td>AA</td>
            <td>BB</td>
            <td>CC</td>
            <td>DD</td>
        </tr>
        <tr>
            <td>AA</td>
            <td>BB</td>
            <td>CC</td>
            <td>DD</td>
        </tr>
    </tbody>
    </table>
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JveHpoYW5n_size_16_color_FFFFFF_t_70]: /images/20220413/a26babf1063243ba997809768b01d413.png

发表评论取消回复

表情：

评论列表（有 0 条评论，434人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML表格（table）实例

> 实例1：课程表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

刺骨的言语ヽ痛彻心扉/ 2023年10月17日 22:56/ 0 赞/ 88 阅读

相关 HTML table表格详解

一、表格属性 <table style="width:500px;"> <tbody> <tr> <td style="text-align:cente

本是古典何须时尚/ 2023年10月12日 10:29/ 0 赞/ 57 阅读

相关 html画table表格

代码： <!DOCTYPE> <html> <head> <meta charset="utf-8"> <styl

小咪咪/ 2023年10月03日 19:14/ 0 赞/ 18 阅读

相关表格标签（HTML）

表格标签（HTML） <!DOCTYPE html> <html lang="en"> <head> <meta cha

矫情吗；*/ 2023年10月03日 12:27/ 0 赞/ 14 阅读

相关 (4)表格的html标签,html标签之表格标签

HTML表格组成: 由 <table> <tbody> <tr> <th>或</th> <td>标签：标签中；</td> </tr> <

叁歲伎倆/ 2022年10月19日 15:56/ 0 赞/ 320 阅读

相关 html 在线表格制作,HTML 表格

HTML 表格表格其实就是很多的小单元格，而这些小单元格很有次序的排列着，它们有很多行，很多列。这些由行列组成的布局，就叫表格，表格是 table 标签来定义的。 HTM

左手的ㄟ右手/ 2022年10月05日 10:51/ 0 赞/ 590 阅读

相关 HTML表格table

什么是表格？表格是由行和列排列而成的一种结构，按照行和列呈现数据，从而进行页面布局。这种布局方式已经过时。建议使用div+css实现页面布局。如何创建HTML表格：H

淡淡的烟草味﹌/ 2022年05月15日 00:30/ 0 赞/ 398 阅读

相关 html用table标签制作表格

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JveHpo

雨点打透心脏的1/2处/ 2022年04月13日 11:10/ 0 赞/ 435 阅读

相关 HTML table表格结构

表格基本上有如下几个标签构成: （1）.`<table>`标签用来创建表格的外部框架。（2）.`<tr>`标签用来创建表格的行。

小灰灰/ 2020年05月16日 20:11/ 0 赞/ 1009 阅读

相关 HTML <table>表格概述

使用`<table>`可以创建一个表格，之前，表格会用来进行页面布局，但是由于嵌套过于复杂，不利于灵活布局和后期改版，当前已经鲜有使用，不要认为它已经被淘汰，而是被用来...

小灰灰/ 2020年05月16日 20:07/ 0 赞/ 998 阅读