HTML: Using a table to draw a curriculum table

Source: Internet
Author: User

This knowledge is often overlooked by me, and misunderstood (it is not my misunderstanding), once a company's requirements: Do not use table, all use Div, even if the whole, can use table easily out of the same style, also must use Div.

Maybe this guy doesn't know the difference between table layouts and table.

Instead, as shown in the image below, if using a table is far less than using a div, if you are simply abandoning table, not only knowing that there is no use of life, but froze in their own thinking, if the advantage of the Div is the Web site, then the advantage of table is the display of the numbers ( and the vertical direction of the center).

<style>Table{Border-collapse:collapse;        }Table TD{Height:24px;Line-height:24px;width:100px;Border:1px solid #d7d7d7;        }    </style>

<Table> <TR> <TD>Time of week</TD> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> <TD>5</TD> </TR>
<!--first line--
<TR> <TDrowspan= "2">Morning</TD> <TD>Xx</TD> <TD>Cc</TD> <TD>Ff</TD> <TD>Dd</TD> <TD>Gg</TD> </TR>
<!--the second row rowspan 1 units down
<TR> <TD>Ddgf</TD> <TD>hh</TD> <TD>Bb</TD> <TD>Ss</TD> <TD>Tt</TD> </TR>
<!--the first cell in the third row is merged--
<TR> <TDcolspan= "6"></TD> </TR>
<!--line fourth colspan right together 5--
<TR> <TDrowspan= "2">Afternoon</TD> <TD>Xx</TD> <TD>Cc</TD> <TD>Ff</TD> <TD>Dd</TD> <TD>Gg</TD> </TR>
<!--line fifth with second line--
<TR> <TD>Ddgf</TD> <TD>hh</TD> <TD>Bb</TD> <TD>Ss</TD> <TD>Tt</TD> </TR>
<!--line sixth and line three--
</Table>

Table is still not dependent.

HTML: Using a table to draw a curriculum table

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.