Basics of HTML

  1. Terms and Definitions
  2. Principles of WEB 2.0
  3. The structure of the HTML-document
  4. Main metatags
  5. Formatting Text HTML
  6. Lists html-page
  7. Text fixed format
  8. Selected text html-page
  9. Change font options
  10. Graphics html-page
  11. Tables html-page
  12. Hyperlinks
  13. IMAGEMAP
  14. Frames

CSS-based

  1. What is CSS
  2. CSS syntax
  3. Style classes
  4. Combined styles
  5. CSS table
  6. CSS cascading rules
  7. Recommendations applying styles
  8. Font options
  9. Line breaks, vertical alignment
  10. Background settings
  11. Parameters of the paragraph
  12. List options
  13. The parameters of the cursor
  14. Options indentation
  15. Parameters frame
  16. Parameters selection
  17. Display options
  18. Containers


   

Tables html-page

The most common printing tables are used to accommodate as much information on a limited area of ??the print edition.

The HTML table play a much more important role. Tables in HTML rather than perform the function of structuring the data as a function of design html-pages. With tables, you can create almost as many complex design html-pages.

HTML-tables are created in 4 steps:

  1. TABLE - creates its own table (tag pair);
  2. TR - creates a table row (paired tag) tag TR must always be embedded in a TABLE;
  3. TH, TD - creates a table header (optional tag) and table cell (paired tags), tag TH, TD must always be invested in the tag TR;
  4. Title and table cells are filled with information (text, pictures ...).
EXAMPLE:

<table>
<tr>
	<th>Parameter</th>
	<th>Value</th>
</tr>
<tr>
	<td>Length (m)</td>
	<td>10</td>
</tr>
<tr>
	<td>Width (m)</td>
	<td>5</td>
</tr>
</table>

See examples in the browser..

It is important to understand that in a table cell, you can put any information in any volume - text, graphics, other tables, sound files, video files.

The rules, which does perform the derivation of the table on the screen:

IMPORTANT!

Mandatory rules that can not be broken:

  • tag TR must be within the tag TABLE;
  • tags TD, TH should be within the tag TR;
  • The contents of the table should be within the tag TD, TH;
  • A cell of the table should not be empty, otherwise it will not be displayed, if necessary, to the cell was empty, it should place a space character (&nbsp;).

Title and table section

These additional opportunities HTML, as the creation of the header and table sections are applied in practice, not often, but they need to know.

Header table is created using the tag CAPTION . Text placed in the tag CAPTION, is always displayed on top of the table and centered. Usually CAPTION tag is immediately after the opening tag TABLE, but can be anywhere in the body HTML-page.

logical tables can be broken with the help of three tags:

The browser does not display the tags THEAD, TBODY, TFOOT . They only divide the table into logical parts.

Example 2:

<table>
 <caption>Dynamics of prices</caption>
 <THEAD>
  <tr>
	<th>Year</th>
	<th>Price</th>
  </tr>
 </THEAD>
 <TBODY>
  <tr>
	<td>2010</td>
	<td>100</td>
  </tr>
  <tr>
	<td>2011</td>
	<td>120</td>
  </tr>
  <tr>
	<td>2012</td>
	<td>130</td>
  </tr>
  <tr>
	<td>2013</td>
	<td>110</td>
  </tr>
 </TBODY>
 <TFOOT>
  <tr>
	<td>Average</td>
	<td>115</td>
  </tr>
 </TFOOT>
</table>

See examples in the browser..

Merging Table Cells

Type a standard table:

1 2 3 4 5
6 7 8 9 10
11 12 13 14 15
16 17 18 19 20

Option table with merged cells:

1+6 2+3+4+5
7 8 9 10
11 12+13 14 15+20
16 17 18 19


HTML-code tables with merged cells:

<table border="1">
<tr>
	<td rowspan="2">1+6</td>
	<td colspan="4">2+3+4+5</td>
</tr>
<tr>
	<td>7</td>
	<td>8</td>
	<td>9</td>
	<td>10</td>
</tr>
<tr>
	<td>11</td>
	<td colspan="2">12+13</td>
	<td>14</td>
	<td rowspan="2">15+20</td>
</tr>
<tr>
	<td>16</td>
	<td>17</td>
	<td>18</td>
	<td>19</td>
</tr>
</table>

Cells in HTML combined with two attributes of the tag TD :

The standard 2x2 table:

1 2
3 4


HTML-code tables 2х2:

<table border="1">
<tr>
	<td>1</td>
	<td>2</td>
</tr>
<tr>
	<td>3</td>
	<td>4</td>
</tr>
</table>

A table with merged cells in a row:

1+2
3 4


HTML-code tables:

<table border="1">
<tr>
	<td colspan="2">1+2</td>
</tr>
<tr>
	<td>3</td>
	<td>4</td>
</tr>
</table>

A table with merged cells in column:

1+3 2
4


HTML-code tables:

<table border="1">
<tr>
	<td rowspan="2">1+3</td>
	<td>2</td>
</tr>
<tr>
	<td>4</td>
</tr>
</table>

Many of HTML-editors let you create a table with merged cells in the interactive rezhiime, greatly simplifying the work. To create a table with merged cells in the "manual mode", it is necessary to learn the following rules:

Attributes of tags TABLE, TR, TD

align - the horizontal alignment: left (default); in the center; to the right.

<TABLE align = left|center|right>
<TR align = left|center|right>
<TD align = left|center|right>

width - width of the table, row, or cell (the value can be set in pixels or percentage).

<TABLE width = 90%>
<TR width = 150>
<TD width = 50>

valign - alignment of the contents of cells vertically: in the middle (default); on top; on the bottom; Baseline.

<TR valign = center|top|bottom|baseline>
<TD valign = center|top|bottom|baseline>

height - line-height table (pixels or percentage).

<TR height = 200>

cellpadding - the distance between the cell contents and its border (pixels).

cellspacing - the distance between table cells.

<TABLE cellpadding=5; cellspacing=10>

bgcolor - background color tables, rows or cells.

<TABLE bgcolor = red>
<TR bgcolor = blue>
<TD bgcolor = white>

background - file background image for a table or a single cell.

<TABLE background = "image.ipg">
<TD background = "image.png">

border - the thickness of the lines of the table.

<TABLE border = 2>

bordercolor - line color tables, rows or cells.

<TABLE bordercolor = red>
<TR bordercolor = blue>
<TD bordercolor = white>
Example 3:

<table border="2" bordercolor="#800000" width="250" bgcolor="#808000">
 <caption>Dynamics of prices</caption>
 <THEAD>
  <tr align="center">
	<th>Year</th>
	<th>Price</th>
  </tr>
 </THEAD>
 <TBODY>
  <tr >
	<td>2010</td>
	<td>100</td>
  </tr>
  <tr>
	<td>2011</td>
	<td>120</td>
  </tr>
  <tr>
	<td>2012</td>
	<td>130</td>
  </tr>
  <tr>
	<td>2013</td>
	<td>110</td>
  </tr>
 </TBODY>
 <TFOOT>
  <tr>
	<td>Average</td>
	<td>115</td>
  </tr>
 </TFOOT>
</table>

See examples in the browser..


TOP ↑