EduCoder_web实训作业--表格标签—表格高级样式的设置

最新推荐文章于 2022-11-26 23:26:23 发布

凤凰谷佛

最新推荐文章于 2022-11-26 23:26:23 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： EduCoder--Web程序设计文章标签： css css3 html html5

本文链接：https://blog.youkuaiyun.com/weixin_45803282/article/details/109700003

EduCoder--Web程序设计专栏收录该内容

44 篇文章

订阅专栏

本文通过一系列实例介绍了HTML表格的样式设置，包括边框(frame)、内部边框(rules)的显示，以及表格宽度(width)、高度(height)、边框(border)等属性的使用。还展示了如何创建带有背景图片(body background)的表格，以及复杂的表格结构，如合并单元格(throwspan, colspan)。此外，文章中包含了一个家庭账单的案例，详细呈现了表格在实际应用中的布局和样式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一关

c a b a d

需要注意的是：
外边框样式属性 frame的值：
above：显示上边框
below：显示下边框
hsides：显示上下边框
vsides：显示左右边框
lhs：显示左边框
rhs：显示右边框
border：显示上下左右边框
void：不显示边框
内部边框样式属性 rule的值：
all：显示所有内部边框
none：不显示内部边框
rows：仅显示行边框
cols：仅显示列边框
groups：显示介于行组和列组间边框

第二关

<!-- ********* Begin ******* -->
   <table width="100" height="80" frame="hsides" border="4"  >
   
    <!-- ********* End ********* -->

第三关

 <!-- ********* Begin ******* -->
   <table width="100" height="80" border="4" frame="hsides" rules="rows">
   
    <!-- ********* End ********* -->

第四关

	<!-- ********* Begin ********* -->
		<tr>
			<th rowspan="2">姓名</th>
			<th colspan="2">签到</th>
		
			<th rowspan="2">备注</th>
		</tr>
        <tr>
            <th>第1次</th>
			<th>第2次</th>
        </tr>
		<tr>
			<td >张三</td>
			<td></td>
			<td></td>
		    <td></td>
		</tr>
		<!-- ********* End ********* -->

第五关

<!-- ********* Begin ********* -->
<!-- 表格标题 -->


<body background="https://www.educoder.net/api/attachments/1217848">

<table border="2" width="600" bordercolor="#00ff00" cellpadding="6" align="center" >
	<caption>家庭账单</captiopn>
	<tr>
		<th rowspan="2" colspan="2">本周项目</th>
		<th colspan="2">费用明细</th>
		<th rowspan="2">备注</th>
	</tr>
	<tr>
		<th>收入</th>
		<th>支出</th>
	</tr>
	<tr>
		<th rowspan="3">收入</th>
		<th>工资</th>
		<td>10000</td>
		<td>0</td>
		<td></td>
	</tr>
	<tr>
		<th>兼职</th>
		<td>2000</td>
		<td>0</td>
		<td></td>
	</tr>
	<tr>
		<th>收入合计</th>
		<td>12000</td>
		<td>0</td>
		<td></td>
	</tr>
	<tr>
		<th rowspan="3">支出</th>
		<th>生活用品</th>
		<td>0</td>
		<td>4000</td>
		<td></td>
	</tr>
	<tr>
		<th>学杂费</th>
		<td>0</td>
		<td>3000</td>
		<td></td>
	</tr>
	<tr>
		<th>支出合计</th>
		<td>0</td>
		<td>7000</td>
		<td></td>
	</tr>
</table>
</body>
<!-- ********* End ********* -->