您的位置：首页 > Web前端 > HTML

【html】第三章 表格的使用 (一)

2014-05-21 17:23 190 查看
java初学者--html系列教程--表格的使用(一)

表格的使用我们分为两个章节来讲

在之前的教程中，已经说明，在每个html文件中，我们需要定义一个html文件的基本结构

如下

<html>

        <head>

                <title>网页标题：html系列教程--表格的使用</title>

        </head>

        <body>

                <p>网页主体：如何创建一个表格？<p>

        </body>

</html>

复制代码

为了统一规范，我们还需要添加w3c规范，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>网页标题：html系列教程--表格的使用</title>

        </head>

        <body>

                <p>网页主体：如何创建一个表格？<p>

        </body>

</html>

复制代码

注：<p></p>这是指包含的内容在一行

好的，html文件我们已经创建好了，下面看我们如何创建一个表格

表格的英文意思就是Table,在这里呢，我们同样表格的标签就是table

基本语法：

<tabel>

        <tr>

                <td></td>

        </tr>

</table>

复制代码

解析：我们知道，表格分几行几列的，那么这个我们如何去控制

首先创建<tabel></table>这个里面包含的就是一个表格

<tr><tr> 代表的就是表格的行 

在<tr></tr>里我们可以创建多个单元格。在标签里添加“<td>这里添加单元格内容</td>”

我们已经知道基本概念了，下面我们创建一个简单的表格

<table>

        <tr>

                <td>第一行的第一个单元格</td>

                <td>第一行的第二个单元格</td>

                <td>第一行的第三个单元格</td>

        </tr>

        <tr>

                <td>第一行的第一个单元格</td>

                <td>第二行的第二个单元格</td>

                <td>第三行的第三个单元格</td>

        </tr>

</table>

复制代码

为了能显示效果我们在表格添加一个边框属性：border="1"

完整的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>网页标题：html系列教程--表格的使用</title>

        </head>

        <body>

                <p>网页主体：如何创建一个表格？--java初学者系列教程http://wwww.javalearn.net<p>

                <table border="1">

                        <tr>

                                <td>第一行的第一个单元格</td>

                                <td>第一行的第二个单元格</td>

                                <td>第一行的第三个单元格</td>

                        </tr>

                        <tr>

                                <td>第一行的第一个单元格</td>

                                <td>第二行的第二个单元格</td>

                                <td>第三行的第三个单元格</td>

                        </tr>

                </table>

        </body>

</html>

复制代码

通过浏览器看


 

原文地址：http://www.javalearn.net/thread-193-1-1.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html java初学者 web
相关文章推荐
新的分享
章节导航