学习日记2018.7.20

HTML表格

表格由 table 标签来定义。每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

一.表格的特点：

数据展现
页面布局

大体结构如下：

<table>
    <thead>
        <tr>
            <th>序号</th>
            <th>序号</th>
        </tr>
    <thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>S1</td>
        </tr>
    <tbody>
</table>

二.表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

三.表格的表头
表格的表头使用th标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器上显示：

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

四.表格中的空单元格
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器中显示如下：

row 1, cell 1	row 1, cell 2
	row 2, cell 2

代码的编写

一张课程表：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <table border="2" cellspacing="0" cellpadding="20">
    <thead>
            <tr>
                <th colspan="2"></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="5">上午</td>
                <td>早自习</td>
                <td>语文</td>
                <td>英语</td>
                <td>语文</td>
                <td>英语</td>
                <td>语文</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>第一节</td>
                <td>物理</td>
                <td>英语</td>
                <td>语文</td>
                <td>英语</td>
                <td>语文</td>
                <td>物理</td>
            </tr>
            <tr>
                <td>第二节</td>
                <td>数学</td>
                <td>语文</td>
                <td>数学</td>
                <td>数学</td>
                <td>英语</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>第三节</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
                <td>语文</td>
                <td>数学</td>
                <td>生物</td>
            </tr>
            <tr>
                <td>第四节</td>
                <td>化学</td>
                <td>数学</td>
                <td>英语</td>
                <td>物理</td>
                <td>体育</td>
                <td>化学</td>
            </tr>
            <tr>
                <td rowspan="3">下午</td>
                <td>第一节</td>
                <td>语文</td>
                <td>化学</td>
                <td>物理</td>
                <td>化学</td>
                <td>计算机</td>
                <td>语文</td>
            </tr>
            <tr>
                <td>第二节</td>
                <td>语文</td>
                <td>物理</td>
                <td>化学</td>
                <td>英语</td>
                <td>生物</td>
                <td>英语</td>
            </tr>
            <tr>
                <td>第三节</td>
                <td>德育</td>
                <td>数学</td>
                <td>体育</td>
                <td>生物</td>
                <td>自习</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>晚上</td>
                <td>晚自习</td>
                <td>数学</td>
                <td>英语</td>
                <td>语文</td>
                <td>化学</td>
                <td>物理</td>
                <td>&nbsp;</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

成果展示：

星期星期一星期二星期三星期四星期五星期六

上午早自习语文英语语文英语语文

第一节物理英语语文英语语文物理

第二节数学语文数学数学英语数学

第三节英语生物化学语文数学生物

第四节物理英语语文英语语文物理

下午第一节语文化学物理化学计算机语文

第二节语文物理生物英语生物英语

第三节德育数学体育生物自习

晚上晚自习数学英语语文化学物理

合并单元格会了，但是斜杠怎么加还是不会，希望老师可以讲解一下

星期	星期一	星期二	星期三	星期四	星期五	星期六
上午	早自习	语文	英语	语文	英语	语文
第一节	物理	英语	语文	英语	语文	物理
第二节	数学	语文	数学	数学	英语	数学
第三节	英语	生物	化学	语文	数学	生物
第四节	物理	英语	语文	英语	语文	物理
下午	第一节	语文	化学	物理	化学	计算机	语文
第二节	语文	物理	生物	英语	生物	英语
第三节	德育	数学	体育	生物	自习
晚上	晚自习	数学	英语	语文	化学	物理

三、自习内容
CSS样式的自习，包括背景、文本、字体、链接、列表、表格、轮廓的一些常用的样式，通过这些样式能够改变这些元素的一些基本样式，使得网页更加的生动。
背景中的样式有：

background-color、background-image、background-repeat、background-attachment

1
文本样式有：

text-indent、text-align、woed-spacing、letter-spacing、text-transform、text-decoration

1
字体样式有：

font-family、font-style、font-weight、font-size、font-variant

1
链接样式有：

a:link、a:visited、a:hover、a:action

1
列表样式有：

list-style-type、list-style-image、list-style-positon

1
表格样式有：

border、border-clooapse、width、height、text-align、vertical-align、padding、backgound-color

HTML表格

代码的编写

猜你喜欢