jsp表格中的<tr> <td> <th> <br> <b> <p>用法

本文详细介绍了HTML表格的构建方法,包括基本标签如&lt;table&gt;、&lt;tr&gt;、&lt;td&gt;及&lt;th&gt;的用法,并解释了它们之间的层级关系。此外还提供了示例代码帮助理解。

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

<hr>:在下面一行加上一条黑线


<br>:换行


<p>: 标签定义段落。元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。


<b>: 标签规定粗体文本。


<tr>: 一行
<td>: 一列


表格是html中经常使用到的,简单的使用可能很多人都没问题,但是更深入的了解的人恐怕不多,下面我们先来看一下如何使用。

<tr>必须定义在<table></table>里面,表示一行;

<td>必须定义在<tr></tr>里面,表示一列;

<table bgcolor="9999dd" border="1">
   <tr>
     <td>第一行第一列</td>
     <td>第一行第二列</td>
   </tr>
   <tr>
     <td>第二行第一列</td>
     <td>第二行第二列</td>
   </tr>
</table>
注意:上面这些不能写在脚本里,即不能写在<%   %>里面


<table>是<tr>的上层标签
<tr>必须在一个<table></table>里面,它不能单独使用,相当于<table>的属性标签.  
<table>标示一个表格,<tr>标示这个表格中间的一个行  
<td>标示行中的一个列,需要嵌套在<tr></tr>中间

具体格式是:(两行两列)  
<table>  
<tr>  
<td></td>  
<td></td>  
</tr>  
</teble>

<th>和<td>一样,也是需要嵌套在<tr>当中的,<tr>嵌套在<table>当中

<table>...</table> 用于定义一个表格开始和结束

<th>...</th> 定义表头单元格。表格中的文字将以粗体显示(<TH>与<TD>同样是标示一个储存格,唯一不同的是<TH>所标示的储存格中的文字是以粗体出现,即可以这样看:
<th>文字</th>=<td><b>文字</b></td>
),
在表格中也可以不用此标签,<th>标签必须放在<tr>标签内

<tr>...</tr> 定义一行标签,一组行标签内可以建立多组由<td>或<th>标签所定义的单元格

<td>...</td> 定义单元格标签,一组<td>标签将将建立一个单元格,<td>标签必须放在<tr>标签内


。<th>为表格标题,属性summar为摘要,<caption>标签为首部说明,<thead>标签为表格头部,<tbody>标签为表格主体内容,<tfoot>标签为表格尾部。
其中还可以使用scope 可用于取代headers属性,标记含有表头信息的单元格,其中各数值的内容如下:
 row 指示当前单元格,为包含当前单元格的行提供相关的表头信息。
 col 指示当前单元格,为根据当前单元格指定的列提供相应的表头信息。
 rowgroup 指示当前单元格,为包含当前单元格的其余行组提供相关的表头信息。
 colgroup 指示当前单元格,为根据当前单元格指定的其余列组提供相应的表头信息。
abbr 用于定义表头单元格中的缩写名,如果没有定义该属性,则将默认单元格内容为节略形式。
标准表格模型
 <table>
        <caption></caption>
        <thead>
            <tr>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
            </tr>
        </tfoot>
    </table>

相关:

<th>不光是粗体,还是居中的
<caption>也是居中的,而且如果table有border的话则caption不在border之内
TFOOT 元素内包含的有效标签有:  
TD  
TH  
TR  

任何给定的 table 对象都只能定义一个 tFoot


转载自:http://blog.sina.com.cn/s/blog_6e601baf01011kwo.html点击打开链接

``` <form action="xxx.jsp" method="GET" name="性别;生日;所在地区;婚姻状况;学历;喜欢的类型;自我介绍;"> <table width="500"> <style> body{ display:grid; place-content: center; height: 100vh; margin: 0%; font-family: '黑体'; font-size: 100px; } </style> <tr> <td><b>性别</b></td> <td> <input type="radio" id="man" name="sex"/> <label for="man"><img src="images/man.jpg"> 男 </label> <input type="radio" id="women" name="sex"/> <label for="women"><img src="images/women.jpg"> 女 </label> </td> </tr> <tr> <td><b>生日</b></td> <td> <select name="year"> <option selected="selected">--请选择年--</option> <option>1990</option> <option>2000</option> <option>2010</option> </select> <select name="month"> <option selected="selected">--请选择月--</option> <option>1</option> <option>2</option> <option>3</option> </select> <select name="day"> <option selected="selected">--请选择日--</option> <option>11</option> <option>12</option> <option>13</option> </select> </td> </tr> <tr> <td><b>所在地区</b></td> <td> <input type="text" value="安徽" name="area"> </td> </tr> <tr> <td><b>婚姻状况</b></td> <td> <input type="radio" name="marital_status" id="spinsterhood"> <label for="spinsterhood"> 未婚 </label> <input type="radio" name="marital_status" id="married"> <label for="married"> 已婚 </label> <input type="radio" name="marital_status" id="divorce"> <label for="divorce"> 离婚 </label> <input type="radio" name="marital_status" id="secret"> <label for="secret">保密</label> </td> </tr> <tr> <td><b>学历</b></td> <td><input type="text" name="edu_bg"></td> </tr> <tr> <td><b>喜欢的类型</b></td> <td> <input type="checkbox" name="like_type" id="wumei"> <label for="wumei"> 妩媚的 </label> <input type="checkbox" name="like_type" id="keai"> <label for="keai"> 可爱的 </label> <input type="checkbox" name="like_type" id="xiaoxianrou"> <label for="xiaoxianrou"> 小鲜肉 </label> <input type="checkbox" name="like_type" id="laolarou"> <label for="laolarou"> 老腊肉 </label> <input type="checkbox" name="like_type" id="douxihuan"> <label for="douxihuan"> 都喜欢 </label> </td> </tr> <tr> <td><b>自我介绍</b></td> <td> <textarea cols="30" rows="10" name="self_introduction"></textarea> </td> </tr> <tr> <td> <input type="submit" value=" 免费注册 "> </td> </tr> </table> </form>```帮我生成一个完整的正确代码
最新发布
04-01
``` <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page import="java.sql.*"%> <table border="1"> <tr> <th>身份证号</th><th>密码</th><th>姓名</th><th>性别</th><th>单位</th> <th>电话</th><th>单位地址</th><th>邮箱</th><th>报考类别</th><th>备注</th><th>操作</th> </tr> <tr> <td>身份证号</td><td>密码</td><td>姓名</td><td>性别</td><td>单位</td> <td>电话</td><td>单位地址</td><td>邮箱</td><td>报考类别</td><td>备注</td><td><a href="">修改</a>|<a href="">删除</a></td> </tr> <% try{ Class.forName("com.mysql.jdbc.Driver"); }catch (ClassNotFoundException e){ out.println("数据加载失败:"+e.toString()); } Connection con=null; PreparedStatement pstmt=null; ResultSet rs =null; try{ con=DriverManager.getConnection("jdbc:mysql://localhost:3306/bmdb?useSSL=false","root","123456"); //2、创建数据库的访问连接 pstmt=con.prepareStatement("select * from dm");//3、获取sql执行对象 rs=pstmt.executeQuery();//5、执行sql获得结果集 while(rs.next()){//6、根据查询结果判断是否登陆成功 %> <tr> <td>身份证号</td><td>密码</td><td>姓名</td><td>性别</td><td>单位</td> <td>电话</td><td>单位地址</td><td>邮箱</td><td>报考类别</td><td>备注</td><td><a href="">修改</a>|<a href="">删除</a></td> </tr> <% }catch (SQLException e){ out.println("SQL异常:"+e.toString()); }finally { rs.close(); pstmt.close(); con.close(); } %> </table>```修改图中的信息,改为正确的代码
03-29
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值