【Web前端HTML5&CSS3】15-表格

山妖發表於 2021-6-13 21:43:00

<blockquote>
<p>笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版</p>
</blockquote>
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>表格<ul><li>1、表格</li><li>2、长表格</li><li>3、表格的样式<ul><li>HTML 代码</li><li>CSS 代码</li></ul></li><li>4、表单<ul><li>文本框</li><li>密码框</li><li>提交按钮</li><li>单选框</li><li>多选框</li><li>下拉列表</li></ul></li><li>5、表单补充<ul><li>按钮</li></ul></li></ul></li></ul></div><p></p>
<h1 id="表格">表格</h1>
<h2 id="1表格">1、表格</h2>
<p>在现实生活中，我们经常需要使用表格来表示一些格式化数据：</p>
<ul>
<li>课程表、人名单、成绩单...</li>
</ul>
<p>同样在网页中我们也需要使用表格，我们通过<code>table</code>标签来创建一个表格</p>
<p>在<code>table</code>中使用<code>tr</code>表示表格中的一行，有几个<code>tr</code>就有几行</p>
<p>在<code>tr</code>中使用<code>td</code>表示一个单元格，有几个 td<code>就有</code>几个单元格</p>
<ul>
<li><code>rowspan</code> 纵向的合并单元格</li>
<li><code>colspan</code> 横向的合并单元格</li>
</ul>
<pre><code class="language-html"><table border="1" width="50%" align=" center">

<tr>

<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>

<td rowspan="2">D2</td>
</tr>
<tr>
<td>AB</td>
<td>B3</td>
<td>C3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>

<td colspan="2">C4</td>
</tr>
</table>
</code></pre>
<h2 id="2长表格">2、长表格</h2>
<p>可以将一个表格分成三个部分：</p>
<ul>
<li>头部 <code>thead</code></li>
<li>主体 <code>tbody</code></li>
<li>底部 <code>tfoot</code></li>
</ul>
<p><code>th</code> 表示头部的单元格</p>
<pre><code class="language-html"><table>
<thead>
<tr>
   <td>日期</td>
   <td>收入</td>
   <td>支出</td>
   <td>合计</td>
</tr>
</thead>
<tbody>
<tr>
   <td>2000.1.1</td>
   <td>500</td>
   <td>200</td>
   <td>300</td>
</tr>
<tr>
   <td>2000.1.1</td>
   <td>500</td>
   <td>200</td>
   <td>300</td>
</tr>
<tr>
   <td>2000.1.1</td>
   <td>500</td>
   <td>200</td>
   <td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
   <td></td>
   <td></td>
   <td>合计</td>
   <td>1200</td>
</tr>
</tfoot>
</table>
</code></pre>
<h2 id="3表格的样式">3、表格的样式</h2>
<h3 id="html-代码">HTML 代码</h3>
<pre><code class="language-html"><table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>28</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>38</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>16</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>28</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>38</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>16</td>
<td>女儿国</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>16</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>28</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>38</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>16</td>
<td>女儿国</td>
</tr>
</table>
</code></pre>
<h3 id="css-代码">CSS 代码</h3>
<pre><code class="language-css">table {
width: 50%;
margin: 0 auto;
border: 1px black solid;

/* border-spacing：指定边框之间的距离；边框之间虽然没有距离了，但是实际上是两条边框的和，看起来是变粗了 */
/* border-spacing: 0; */

/*border-collapse:collapse；设置边框的合并；真正的将两条边框合并成一条边框 */
border-collapse: collapse;

/* 默认情况下元素在td中是垂直居中的，可以通过vectical-align来修改 */
vertical-align: middle;
text-align: center;
}

/* 如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中
所以说，tr不是table的子元素 */
tbody tr:nth-child(odd) {
background-color: rgb(211, 216, 188);
}

td {
border: 1px black solid;
}
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/81543159dc1d6a8beed1305693d638f6.png" alt="image-20210613195306119" loading="lazy"></p>
<p>其中，</p>
<ul>
<li><code>border-spacing</code>：指定边框之间的距离</li>
<li><code>border-collapse</code>：设置边框的合并</li>
</ul>
<h2 id="4表单">4、表单</h2>
<p><strong>表单</strong></p>
<ul>
<li>在现实生活中表单用于提交数据</li>
<li>在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器</li>
</ul>
<p><strong>form 的属性</strong></p>
<ul>
<li><code>action</code>：表单要提交的服务器的地址</li>
</ul>
<h3 id="文本框">文本框</h3>
<p><mark>注意：数据要提交到服务器中，必须要为元素指定一个<code>name</code>属性值</mark></p>
<pre><code class="language-html">文本框<input type="text" name="username" />
</code></pre>
<h3 id="密码框">密码框</h3>
<pre><code class="language-html">密码框<input type="password" name="password" />
</code></pre>
<h3 id="提交按钮">提交按钮</h3>
<pre><code class="language-html"><input type="submit" value="注册" />
</code></pre>
<h3 id="单选框">单选框</h3>
<p>像这种选择框，必须要措定一个<code>value</code>属性，<code>value</code>属性最终会作为用户填写的值传递给服务器</p>
<pre><code class="language-html">单选框
<input type="radio" name="hello" value="a" />
<input type="radio" name="hello" value="b" checked />
</code></pre>
<h3 id="多选框">多选框</h3>
<pre><code class="language-html">多选框
<input type="checkbox" name="test" value="1" />
<input type="checkbox" name="test" value="2" />
<input type="checkbox" name="test" value="3" checked />
</code></pre>
<h3 id="下拉列表">下拉列表</h3>
<pre><code class="language-html">下拉列表
<select name="haha">
<option value="i">选项一</option>
<option value="ii" selected>选项二</option>
<option value="iii">选项三</option>
</select>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/ea8b0b8806fcebbe73a190b71a09fd3a.png" alt="image-20210613203005016" loading="lazy"></p>
<h2 id="5表单补充">5、表单补充</h2>
<h3 id="按钮">按钮</h3>
<pre><code class="language-html">
<input type="submit" />

<input type="reset" />

<input type="button" value="按钮" />
<br /><br />
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/02ca926acc195ce5382d791756dca361.png" alt="image-20210613203343362" loading="lazy"></p>
<p>上面两种写法实际上效果是一致的，区别在于：</p>
<ul>
<li><code>input</code>是自闭合标签，不需要<code></input></code>就能结束；<code>button</code>不是自闭合标签，跟一般标签一样是成对出现的</li>
<li><code>button</code>因为不是自闭合标签，所以使用起来更灵活，可以嵌套其他的标签</li>
</ul><br><br>
来源：https://www.cnblogs.com/vectorx/p/14881324.html

頁: [1]

琼殿技术论坛's Archiver

【Web前端HTML5&CSS3】15-表格