trtable

该网页为一个网上订餐系统的示例页面,采用JSP技术和JSTL标签库进行开发。页面展示了各种菜品及其详细信息,并提供了购买和详情查看的功能。
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 使用JSTL核心标签 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>我学我会网上订餐系统</title>
<link rel="stylesheet" href="./css/styles.css" type="text/css" />
</head>
<!-- useBean标准动作 -->
<BODY leftMargin=0 topMargin=0 marginheight="0" marginwidth="0">
<table cellSpacing=0 cellPadding=0 width=776 align=center border=0>
<tr>
<td width="220" rowspan="3"><img src="/restrant/images/jb_logo.jpg"
width="200"></td>
<td width="556" height="36"> </td>
</tr>
<tr>
<TD
style="FONT-SIZE: 24pt; FILTER: blur(add=1, direction=120, strength=5); WIDTH: 100%; COLOR: #000000; FONT-FAMILY: arial; POSITION: relative"
noWrap><B><span class="STYLE1">      我学我会</span>
网上订餐系统</B></TD>
</tr>
<tr>
<td> </td>
</tr>
</table>

<TABLE cellSpacing=0 cellPadding=0 width=776 align=center border=0>
<TBODY>
<TR>
<TD background="/restrant/images/001.gif" height=42>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width=0 height=20></TD>
<TD align=middle><FONT
style="FONT-SIZE: 13px; COLOR: #000000"> | </FONT><A
href="#" target=_self><FONT
style="FONT-SIZE: 13px; COLOR: #000000">网站首页</FONT></A><FONT
style="FONT-SIZE: 13px; COLOR: #000000"> | </FONT><A
href="#" target=_self><FONT
style="FONT-SIZE: 13px; COLOR: #000000">关于我们</FONT></A><FONT
style="FONT-SIZE: 13px; COLOR: #000000"> | </FONT><A
href="#" target=_self><FONT
style="FONT-SIZE: 13px; COLOR: #000000">定餐帮助</FONT></A><FONT
style="FONT-SIZE: 13px; COLOR: #000000"> | </FONT><A
href="#" target=_self><FONT
style="FONT-SIZE: 13px; COLOR: #000000">网上定餐</FONT></A><FONT
style="FONT-SIZE: 13px; COLOR: #000000"> | </FONT><A
href="#" target=_self><FONT
style="FONT-SIZE: 13px; COLOR: #000000">客服中心</FONT></A><FONT
style="FONT-SIZE: 13px; COLOR: #000000"> | </FONT></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=776 align=center border=0>
<TBODY>
<TR vAlign=top>
<TD width=181 background="/restrant/images/002.gif">
<TABLE cellSpacing=0 cellPadding=0 width=181 border=0>
<TBODY>
<TR>
<TD><IMG height=234 src="/restrant/images/left_top.jpg" width=181></TD>
</TR>
</TBODY>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD align=middle height=30><FONT color=#000000> <SCRIPT
language=javascript src="/restrant/images/DateTime2.js"></SCRIPT> <SCRIPT
language=javascript>tick('cn');</SCRIPT> </FONT></TD>
</TR>
</TBODY>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD>${sessionScope.todayWeather }</TD>
</TR>
<TR>
<TD background="/restrant/images/003.gif" height=4></TD>
</TR>
<TR>
<TD> </TD>
</TBODY>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD> </TD>
</TR>
<TR>
<TD background="/restrant/images/003.gif" height=4></TD>
</TR>
<TR>
<TD align=middle>
<TABLE cellSpacing=0 cellPadding=0 width="94%" border=0>
<TBODY>
<TR>
<TD> </TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG height=72 src="/restrant/images/001.jpg" width=595></TD>
</TR>
</TBODY>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width="90%">
<div class='cnt'><marquee
style="FONT-SIZE: 13px; COLOR: #0000FF" scrollamount='5'
direction='left'><IMG height=15 src="/restrant/images/tp009.gif"
width=15> 欢迎您使用我学我会网上订餐系统,祝您用餐愉快!</marquee></div>
  </TD>
</TR>
</TBODY>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD align=right background="/restrant/images/004.gif" height=19></TD>
</TR>
</TBODY>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="96%" align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=1 cellPadding=1 width="100%" align=center
bgColor=#c0c0c0 border=0>
<TBODY>
<TR bgColor=#dadada>

<TD width="100%" align="right"><a href="#"><img
src="/restrant/images/lcart_cn.gif" border=0></a></TD>
</TR>
</TBODY>
</TABLE>
<BR>
<TABLE cellSpacing=2 cellPadding=1 width="100%" align=center
border=0>
<TBODY>

<TR>
<c:forEach var="foodInfo" items="${requestScope.foodsList}" varStatus="status">
<TD>
<TABLE height="100%" cellSpacing=1 cellPadding=2 border=0>
<TBODY>
<TR>
<TD vAlign=top width=90 height=90><A href="#"
target=_blank><IMG height=80 alt=点击图片查看内容
src="/restrant/images/${foodInfo.foodImage }" width=80 border=0></A></TD>
<TD vAlign=top>
<TABLE cellSpacing=1 cellPadding=0 width="100%" align=center
border=0>
<TBODY>
<TR>
<TD><A href=# target=_blank><STRONG>${foodInfo.foodName}</STRONG></A></TD>
</TR>
<TR>
<TD height=21><FONT color=#ff0000>现价:人民币${foodInfo.foodPrice}元</FONT><BR>
<a href="#">${foodInfo.remark}</a>!</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<TR>
<TD height=28>编号: ${foodInfo.foodID}</TD>
<TD>
<TABLE cellSpacing=1 cellPadding=0 width=145 border=0>
<TBODY>
<TR>
<TD align="middle" width="70"><a href="#"><img
src="/restrant/images/buy_cn.gif" border="0"
longdesc="shoppingCart.html"></a></TD>
<TD align=middle width=70><A href="/restrant/GetFoodInfoByFoodID?foodID=${foodInfo.foodID}" target=_blank><IMG
src="/restrant/images/detail_cn.gif" border=0></A></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<c:if test="${(status.index+1)%2==0}">
</TR>
</c:if>

</c:forEach>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=776 align=center border=0>
<TBODY>
<TR>
<TD background="/restrant/images/005.gif" height=8></TD>
</TR>
</TBODY>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=776 align=center border=0>
<TBODY>
<TR>
<TD bgColor=#eeeeee>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD align=middle><BR>
<P align=center><FONT color=#000000>Copyright ©
</FONT></P>
<P align=center> </P>
<BR>
<BR>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</html>
### HTML Table `tr` 和 `td` 的基本用法 在HTML中,表格通过 `<table>` 标签创建,而每一行由 `<tr>` (table row) 定义。每行内的数据则放置于 `<td>` (table data) 或者 `<th>` (table header) 中[^1]。 #### 创建简单的表格结构 下面是一个基础的例子来展示如何构建一张带有表头和两列三行的数据表格: ```html <table border="1"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>Data A1</td> <td>Data B1</td> </tr> <tr> <td>Data A2</td> <td>Data B2</td> </tr> <tr> <td>Data A3</td> <td>Data B3</td> </tr> </tbody> </table> ``` 此代码片段展示了如何利用 `<thead>` 来分隔头部区域以及使用 `<tbody>` 区域存放实际内容。这有助于提高文档语义化程度并便于样式控制。 #### 关键属性介绍 对于 `<tr>` 和 `<td>` 元素来说,存在一些重要的属性可以用来定制其外观与行为: - **bgcolor**: 设置单元格或整行的背景颜色;不过官方建议优先采用CSS方式实现相同效果[^3]。 - **colspan** / **rowspan**: 分别用于指定某个单元格跨越多列或多行显示。这对于合并相邻单元格外非常有用。 例如,在某一行的第一个单元格设置 colspan 属性使其占据两个位置: ```html <tr> <td colspan="2">This cell spans two columns.</td> </tr> ``` #### 使用JavaScript操作表格元素 除了静态定义外,还可以借助 JavaScript 动态修改表格内容。比如获取特定表格内所有行对象数组可以通过如下方式完成[^4]: ```javascript // 获取ID为'tb1'的表格下的所有行 var rows = document.getElementById('tb1').rows; for(var i=0;i<rows.length;i++){ console.log(rows[i].innerHTML); } ``` 上述脚本会打印出每一个TR内部的HTML字符串表示形式到浏览器控制台窗口里去。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值