HTML表格（table）&内联框架

全栈开发日记

发布于 2022-05-12 20:10:47

3.3K0

HTML表格的创建

先是一段表格代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        table{
            border: 1px solid black;
        }
        td{
            border: 1px solid black;
        }
</style>
</head>
<body>
<table>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>
</body>
</html>

详解：

表格由<table>（双标签）标签包裹；
<tr>（双标签）标签代表所创建的表格有多少行；
<td>（双标签）标签代表所创建的表格以及所在的行有多少列；
<td>中写内容，会显示在所在的单元格中；
表格样式默认不会显示边框，需要我们加属性或者样式；
<table>为块状元素，会独占一行，td也是块状元素，当然他和他的兄弟姐妹并不冲突；
如果需要单元格横跨两格或者更多格需要添加属性：
- colspan="2" 跨列，合并单元格（横着跨）
- rowspan="2" 跨行，合并单元格（竖着跨） ps：设置跨行或者跨列属性后需要把被跨的那个<td>单元格删除。

HTML内联框架

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

详解：

<frameset>框架集（双标签）；整个文件不允许有body标签；
cols="25%,50%,*" 按列来进行划分页面；
rows="25%,50%,*" 按行来进行划分页面； ps：*表示剩余的百分占比剩余的部分。
<iframe src="链接地址"> 单双标签都行； ps：主要用于在网页中划出一个窗口显示另外的网页。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-12-19，如有侵权请联系 cloudcommunity@tencent.com 删除

html

HTML表格（table）&内联框架

HTML表格（table）&内联框架

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐