HTML & CSS 基本入门【7】表格
<h2 style="color: black; text-align: left; margin-bottom: 10px;">表格的基本结构</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">表格是网页上最<span style="color: black;">平常</span>的元素，它除了<span style="color: black;">能够</span>用来展示数据，还常常被用来排版。虽然<span style="color: black;">此刻</span>提倡<span style="color: black;">运用</span>DIV+CSS完成页面布局，但表格框架简单明了，<span style="color: black;">针对</span>繁杂的数据，一个简洁的表格能让其展现的极有条理。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">简单<span style="color: black;">来讲</span>，表格<span style="color: black;">是由于</span>行、列（单元格）<span style="color: black;">构成</span>。表格由 <table> 标签来定义。<span style="color: black;">每一个</span>表格均有若干行（由 <tr> 标签定义），每行又由若干单元格（即列，由 <td> 标签定义）<span style="color: black;">构成</span>。表格单元格里<span style="color: black;">能够</span><span style="color: black;">包括</span>文本、<span style="color: black;">照片</span>、列表、段落、表单、水平线、表格（嵌套）等等。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">别罗嗦，看代码。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下面的代码是一个两行两列的表格。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><!DOCTYPE html></span>
<span style="color: black;"><</span><span style="color: black;">html</span> <span style="color: black;">xmlns</span><span style="color: black;">=</span><span style="color: black;">"http://www.w3.org/1999/xhtml"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">http-equiv</span><span style="color: black;">=</span><span style="color: black;">"Content-Type"</span> <span style="color: black;">content</span><span style="color: black;">=</span><span style="color: black;">"text/html; charset=utf-8"</span><span style="color: black;">/></span>
<span style="color: black;"><</span><span style="color: black;">title</span><span style="color: black;">></</span><span style="color: black;">title</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">table</span><span style="color: black;">></span><span style="color: black;"><!--表格<span style="color: black;">起始</span>--></span>
<span style="color: black;"><</span><span style="color: black;">tr</span><span style="color: black;">></span><span style="color: black;"><!--表格<span style="color: black;">第1</span>行--></span>
<span style="color: black;"><</span><span style="color: black;">td</span><span style="color: black;">></span>姓名<span style="color: black;"></</span><span style="color: black;">td</span><span style="color: black;">></span><span style="color: black;"><!--<span style="color: black;">第1</span>行<span style="color: black;">第1</span>个单元格--></span>
<span style="color: black;"><</span><span style="color: black;">td</span><span style="color: black;">></span>张三<span style="color: black;"></</span><span style="color: black;">td</span><span style="color: black;">></span><span style="color: black;"><!--<span style="color: black;">第1</span>行第二个单元格--></span>
<span style="color: black;"></</span><span style="color: black;">tr</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">tr</span><span style="color: black;">></span><span style="color: black;"><!--表格第二行--></span>
<span style="color: black;"><</span><span style="color: black;">td</span><span style="color: black;">></span>民族<span style="color: black;"></</span><span style="color: black;">td</span><span style="color: black;">></span><span style="color: black;"><!--第二行<span style="color: black;">第1</span>个单元格--></span>
<span style="color: black;"><</span><span style="color: black;">td</span><span style="color: black;">></span>汉族<span style="color: black;"></</span><span style="color: black;">td</span><span style="color: black;">></span><span style="color: black;"><!--第二行第二个单元格--></span>
<span style="color: black;"></</span><span style="color: black;">tr</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">table</span><span style="color: black;">></span><span style="color: black;"><!--表格结束--></span>
<span style="color: black;"></</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">html</span><span style="color: black;">></span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">表格默认是<span style="color: black;">无</span>边框的，下面的效果图加入了边框，目的是能让表格的结构更清晰。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-e913d8afa83bee21ef89381aa6c0b19e_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">表格的标准结构</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">表格除了行<tr>和单元格<td>，还<span style="color: black;">能够</span>有标题<caption>和表头<th>。<span style="color: black;">另一</span>，表格的语义化还将表格分为表格页眉<thead>、表格主体<tbody>、表格页脚<tfoot>三个部分。引入语义化，能够让表格结构更清晰、代码语义更良好。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下面的示例代码加入了标题和表头，<span style="color: black;">同期</span>引入了表格语义化，将表格分为页眉、主体。页脚三个部分，表格语义化<span style="color: black;">是不是</span>添加不会影响到表格的<span style="color: black;">表示</span>效果。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><!DOCTYPE html></span>
<span style="color: black;"><</span><span style="color: black;">html</span> <span style="color: black;">xmlns</span><span style="color: black;">=</span><span style="color: black;">"http://www.w3.org/1999/xhtml"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">http-equiv</span><span style="color: black;">=</span><span style="color: black;">"Content-Type"</span> <span style="color: black;">content</span><span style="color: black;">=</span><span style="color: black;">"text/html; charset=utf-8"</span><span style="color: black;">/></span>
<span style="color: black;"><</span><span style="color: black;">title</span><span style="color: black;">></</span><span style="color: black;">title</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">table</span><span style="color: black;">></span><span style="color: black;"><!--表格<span style="color: black;">起始</span>--></span>
<span style="color: black;"><</span><span style="color: black;">caption</span><span style="color: black;">></span><span style="color: black;">第1</span>学期学生成绩表<span style="color: black;"></</span><span style="color: black;">caption</span><span style="color: black;">></span><span style="color: black;"><!--表格标题--></span>
<span style="color: black;"><</span><span style="color: black;">thead</span><span style="color: black;">></span><span style="color: black;"><!--表格页眉--></span>
<span style="color: black;"><</span><span style="color: black;">tr</span><span style="color: black;">></span><span style="color: black;"><!--<span style="color: black;">第1</span>行--></span>
<span style="color: black;"><</span><span style="color: black;">th</span><span style="color: black;">></span>姓名<span style="color: black;"></</span><span style="color: black;">th</span><span style="color: black;">></span><span style="color: black;"><!--表头--></span>
<span style="color: black;"><</span><span style="color: black;">th</span><span style="color: black;">></span>语文<span style="color: black;"></</span><span style="color: black;">th</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">th</span><span style="color: black;">></span>数学<span style="color: black;"></</span><span style="color: black;">th</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">th</span><span style="color: black;">></span><span style="color: black;">理学</span><span style="color: black;"></</span><span style="color: black;">th</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">tr</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">thead</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">tbody</span><span style="color: black;">></span><span style="color: black;"><!--表格主体--></span>
<span style="color: black;"><</span><span style="color: black;">tr</span><span style="color: black;">></span><span style="color: black;"><!--第二行--></span>
<span style="color: black;"><</span><span style="color: black;">td</span><span style="color: black;">></span>张小明<span style="color: black;"></</span><span style="color: black;">td</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">td</span><span style="color: black;">></span>80<span style="color: black;"></</span><span style="color: black;">td</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">td</span><span style="color: black;">></span>90<span style="color: black;"></</span><span style="color: black;">td</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">td</span><span style="color: black;">></span>80<span style="color: black;"></</span><span style="color: black;">td</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">tr</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">tr</span><span style="color: black;">></span><span style="color: black;"><!--第三行--></span>
<span style="color: black;"><</span><span style="color: black;">td</span><span style="color: black;">></span>王小花<span style="color: black;"></</span><span style="color: black;">td</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">td</span><span style="color: black;">></span>90<span style="color: black;"></</span><span style="color: black;">td</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">td</span><span style="color: black;">></span>70<span style="color: black;"></</span><span style="color: black;">td</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">td</span><span style="color: black;">></span>80<span style="color: black;"></</span><span style="color: black;">td</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">tr</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">tbody</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">tfoot</span><span style="color: black;">></span><span style="color: black;"><!--表格页脚--></span>
<span style="color: black;"><</span><span style="color: black;">tr</span><span style="color: black;">></span><span style="color: black;"><!--第四行--></span>
<span style="color: black;"><</span><span style="color: black;">td</span><span style="color: black;">></span>平均分<span style="color: black;"></</span><span style="color: black;">td</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">td</span><span style="color: black;">></span>85<span style="color: black;"></</span><span style="color: black;">td</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">td</span><span style="color: black;">></span>80<span style="color: black;"></</span><span style="color: black;">td</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">td</span><span style="color: black;">></span>80<span style="color: black;"></</span><span style="color: black;">td</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">tr</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">tfoot</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">table</span><span style="color: black;">></span><span style="color: black;"><!--表格结束--></span>
<span style="color: black;"></</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">html</span><span style="color: black;">></span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">表格默认是<span style="color: black;">无</span>边框的，下面的效果图加入了边框，目的是能让表</p>
感谢你的精彩评论，带给我新的思考角度。
页:
[1]