美文网首页
认识html————细线表格

认识html————细线表格

作者: 周行知 | 来源:发表于2019-04-19 18:08 被阅读0次

细格表格的定义

先观察一个示例:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>细线表格</title>

</head>

<body>

<table border="1">

<tr>

<td>姓名</td>

<td>年龄</td>

</tr>

<tr>

<td>周行知</td>

<td>29</td>

</tr>

</table>

</body>

</html>

运行结果·如图所示:

现在我们再来看以下代码(注:在表格中不能通过外边距为0来实现细线表格是不靠谱的,因为它是将2条线合并为一条线,所以看上去很不舒服。),代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>细线表格</title>

</head>

<body>

<table bgcolor="black" cellspacing="1px">

<tr bgcolor="white">

<td>姓名</td>

<td>年龄</td>

</tr>

<tr bgcolor="white">

<td>周行知</td>

<td>29</td>

</tr>

</table>

</body>

</html>

注:bgcolor是背景颜色,人们常说背景墙,其实就是指的背景墙要刷什么颜色油漆做背景。

运行结果如下:

发散练习:大家可以尝试一下,通过border="1"的方式来实现(在表格中不能通过外边距为0来实现细线表格)看看效果能不能达到

总结细线表格制作方式

1.给table标签设置bgcolor.

2.给tr标签设置bgcolor.

3.给table标签设置cellspacing="1px"

相关文章

  • 认识html————细线表格

    细格表格的定义 先观察一个示例: 细线表格 姓名 年龄 周行知 29 运行结果·如...

  • 认识HTML一一表格的结构

    表格的结构 观察下面代码: 细线表格 今日小说排行榜 排行 关键词 趋势 今日搜索...

  • Day01 HTML

    01.HTML基础知识 02.文本标签 03.图片和超链接 04.表格标签 05.细线表格 06.不规则表格 01...

  • (22)day2-表单和css基础

    2.1 细线表格 细线表格 1.不设置boder,设置cellspacing为12.设置整个表格背景色为表格线颜色...

  • 2018-09-17 day-21-HTML

    1.序言 2.html简介 3.head标签 4.文本标签 5.图片和超链接 6.表格标签 7.细线表格 8.不规则表格

  • 01.21细线表格

  • H5前端开发学习笔记——0x05表格标签

    本节大纲 课时37表格标签基本使用(理解) 课时38表格标签的属性(了解) 课时39细线表格(理解) 课时40表格...

  • 2-12. 细线表格

    1、在表格标签中通过设置外边距为0,并不能实现一个细线表格,只会将两条线和并成一条 2、制作细线表格 给table...

  • HTML5 学习笔记 2017-02-13 am

    细线表格 在表格标签中向通过指定外边距为0来实现细线表格是不靠谱的,其实它是将2条线合并为一条线,所以看上去很不舒...

  • 认识html————表格的标签

    表格的标签的基本使用: 过去表格标签使用特别多。 什么是我们的表格标签? 表格标签的作用:用来给一堆数据添加表格语...

网友评论

      本文标题:认识html————细线表格

      本文链接:https://www.haomeiwen.com/subject/qzpcgqtx.html