html的自学笔记（3）

最新推荐文章于 2024-08-09 08:30:00 发布

molly655

最新推荐文章于 2024-08-09 08:30:00 发布

阅读量66

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_44389584/article/details/109230483

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML表格的基本结构，包括<table>、<tr>、<th>和<td>标签，并探讨了表格的常用属性，如border、width/height、bgcolor、background、bordercolor、cellspacing和cellpadding。此外，还讨论了表格的对齐方式以及如何通过CSS实现单元格边框的合并。同时，提到了行和列的属性，以及表格结构化和直列化的概念。

摘要由CSDN通过智能技术生成

表格

1. 基本结构

由行列组成，单元格是表格的最基本单位。

<table>定义表格标签，<tr>定义行，<td>定义列，<th>为表头

<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>Lucy</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>Jack</td>
            <td>男</td>
            <td>19</td>
        </tr>
    </table>
</body>

在这里插入图片描述

2. 基本属性

border:表格边框属性 <table border="1">
在这里插入图片描述
如果border 的值增大，只有表格最外围框线增加，而单元格上的边框不会变化。<table border="5">

width/heigh:表格（宽度/高度）属性

<table border="1" width="400" height="200">

在这里插入图片描述
bgcolor:表格背景色属性

 <table border="1" bgcolor="red"  width="400" height="200">

在这里插入图片描述
background:表格背景图属性

<table border="1" background="img/icon.jpg"  width="400" height="200">

在这里插入图片描述

bordercolor：表格边框颜色属性

   <table border="1" bordercolor="blue" width="400" height="200">

在这里插入图片描述

cellspacing:表格单元格间距属性

<table border="1" cellspacing="10" width="400" height="200" >

在这里插入图片描述
当cellspacing=0时：

如果要合并表格边框，则可以使用CSS

 <table border="1" style="border-collapse:collapse;"  width="400" height="200" >

在这里插入图片描述
cellpadding:表格单元格内边距属性

   <table border="1" cellpadding="20" >

在这里插入图片描述
align：表格对齐属性
用于调整表格在其父容器的位置。属性值有left（居左）、center（居中）、right（居右）

  <table border="1" align="left"  >  
  <table border="1" align="right" >
   <table border="1" align="center" >

在这里插入图片描述

3. 行、列的基本属性

4. 结构化和直列化

molly655

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录