WEB DESIGNING

Now, in this page we will learn about tables,how to design a table in a webpage.

TABLES:

Tables display information in rows and columns; they are commonly used to display all manner of data that fits in a grid such as train schedules, television listings, financial reports, and sports results. In this topic, you learn when to use tables and the markup that you need to create them.To begin this topic, you look at some examples of tables and then quickly move to the basic elements used to create them. Having learned the basics, you can then learn some of the more advanced features of tables such as adding captions and headings and achieving more complicated table layouts. The topic ends with a discussion of accessibility issues that relate to tables, because you must understand how a screen reader would read the contents of a table for users with visual impairments.

HOW TO CREATE A TABLE IN A WEBSITE:

You create a table in HTML using the <table> element. Inside the <table> element, the table is

written out row by row. A row is contained inside a <tr> element, which stands for table row. Each

cell is then written inside the row element using a <td> element, which stands for table data.

For Example:

<tr>

</tr>

<tr>

</tr>

< tr>

</tr>

</table>

BASIC TABLE ELEMENTS AND ATTRIBUTES:

The <table> Element Creates a Table

The <table> element is the containing element for all tables. It can carry the following attributes:

➤➤ All the universal attributes

➤➤ Basic event attributes for scripting

The <tr> Element Contains Table Rows

The <tr> element contains each row in a table. Anything appearing within a <tr> element should

appear on the same row.

The <td> and <th> Elements Represent Table Cells

Every cell in a table is represented by either a <td> element for cells containing table data or a <th>

element for cells containing table headings.By default, the contents of a <th> element usually display in a bold font, horizontally aligned in the center of the cell. The content of a <td> element, meanwhile, usually displays left-aligned and not in bold (unless otherwise indicated by CSS or another element).The <td> and <th> elements can both carry the same set of attributes, and the attribute applies only to that one cell carrying it. Any effects these attributes have override settings for the table as a whole or any containing element (such as a row).In addition to the universal attributes and the basic event attributes, the <td> and <th> elements can also carry the following attributes:

colspan, headers, rowspan.

<th> elements can also carry the scope attribute.

The colspan Attribute

Use the colspan attribute when a cell should span across more than one column. The value of the

attribute specifies how many columns of the table a cell spans across.

colspan="2"

The headers Attribute

The headers attribute indicates which headers correspond to that cell. The value of the attribute is a

space-separated list of the header cells’ id attribute values:

headers="income q1"

The main purpose of this attribute is to support voice browsers. When a table is read to you, it can

be hard to keep track of which row and column you are on; therefore, the header attribute reminds

users which row and column the current cell’s data belongs to.

The rowspan Attribute

The rowspan attribute specifies the number of rows of the table a cell spans across, the value of

the attribute being the number of rows the cell stretches across.

rowspan="2"

The scope Attribute

You can use the scope attribute to indicate which cells the current header provides a label or header

information for. You can use it instead of the headers attribute in basic tables, but it does not have

much support.

scope="range"

Value Purpose

row---------------------------------------------Cell contains header information for that row.
col----------------------------------------------Cell contains header information for that column.
rowgroup-------------------------------------- Cell contains header information for that rowgroup (a group of cells in a row created using the <thead>, <tbody>, or <tfoot> elements).
colgroup---------------------------------------Cell contains header information for that colgroup (a group of columns created using the <col> or <colgroup> element).

EXAMPLE OF A BASIC TABLE:

<html>

<head>

</head>

<body>

<center><h1><u><b>Assignment Summary</b></u></h1><br>

<TH>Assignment

<TH>Marks 1

<TH>Marks 2

<TH>Marks 3

<TH>Average

<TD>1

<TD>67

<TD>56

<TD>67

<TD>59

</TR>

<TD>2

<TD>56

<TD>67

<TD>78

<TD>59

</TR>

<TD>3

<TD>56

<TD>45

<TD>34

<TD>59

</TR>

<TD>4

<TD>23

<TD>45

<TD>67

<TD>45

</TR>

</center>

ANOTHER EXAMPLE:

Using colspan method to make a table,

<html>

<head>

</head>

<body>

<center><h1><b><u>ASSIGNMENT</u></b></h1><br>

<tr>

<td colspan=2>7

<td colspan=2>8

<td colspan=2>9

</tr>

<tr>

<td>10

<td colspan=2>11

<td colspan=2>12

<td>13

</tr>

<tr>

<td colspan=2>14

<td colspan=2>15

<td colspan=2>16

</tr>

<tr>

<td>17

<td colspan=2>18

<td colspan=2>19

<td>20

</tr>

<tr>

<td colspan=2>21

<td colspan=2>22

<td colspan=2>23

</tr>

<tr>

<td>24

<td colspan=2>25

<td colspan=2>26

<td>27

</tr>

<tr>

<td colspan=2>28

<td colspan=2>29

<td colspan=2>30

</tr>

<tr>

<td>31

<td colspan=2>32

<td colspan=2>33

<td>34

</tr>

<tr>

<td>1

<td>2

<td>3

<td>4

<td>5

<td>6

</tr>

</body>

</html>

<html>

<head>

</head>

<body>

<center><h1><b><u>ASSIGNMENT</u></b></h1><br>

<tr>

<td colspan=2>1

<td colspan=2>2

<td>3

</tr>

<tr>

<td colspan=3>4

<td colspan=2>5

</tr>

<tr>

<td colspan=2>6

<td colspan=3>7

</tr>

<tr>

<td colspan=5><center><b>BREAK</b></center>

</tr>

<tr>

<td colspan=2>8

<td colspan=2>9

<td>10

</tr>

<tr>

<td colspan=5><center><b>BREAK</b></center>

</tr>

<tr>

<td>11

<td>12

<td>13

<td>14

<td>15

</tr>

</body>

</html>

For ANY Queries, CONTACT ME at prankurbadhani@gmail.com

WEB DESIGNING

Monday 12 January 2015

TABLES:

HOW TO CREATE A TABLE IN A WEBSITE:

BASIC TABLE ELEMENTS AND ATTRIBUTES:

No comments:

Post a Comment