Formatting tables in an html document. Browser display

colspan tag - combining columns

The most common use of tables of complex structures is web page markup. Look at the picture:

It turns out that we need the first and third rows to have one column each. This is achieved using the parameter colspan tag . This setting tells the browser to combine multiple columns into one. The value of this parameter is a number indicating how many columns will be merged.

For example,

This column includes two columns.

For our example:

Document title

site header
menu content
bottom of the site

Notice that the first and third rows now contain one column each.

Let's look at another example of web page markup:

site header
menu menu menu menu menu menu
news content

Count - how many rows and columns are there in this table? To do this, mentally apply a grid to the drawing. This will result in three rows and six columns.

The first row consists of one column, which includes six columns. Let's write this down:

site header

The second row consists of six columns:

menu menu menu menu menu menu

The third line consists of two columns, with the first including two columns and the second four:

news content

It's not that difficult. We visually overlay the grid on the drawing and write the rows one by one from top to bottom, describing the required number of columns in each.

Rowspan tag - concatenation of rows

What if we need markup like this?

Please note that in the second row we have only one column, because the first column extends from the first row, simply including two.

At first glance, this may seem difficult, but with a little practice you will be able to create tables of any complexity.

Let's look at another example:

cap menu
content
bottom of the site

So in the first row we have two columns, with the second column concatenating the two rows. Let's write this down:

cap menu

The second row is one column (it's just that part of it is hidden by the second column of the first row):

content

Finally, the third row is a single column that includes three columns:

bottom of the site

Using these two options rowspan And colspan You can create tables of any complexity. Practice.

Nested tables

As the name suggests, one table can be placed inside another, or inside any column. Let's do this using our last markup as an example.

So we have this code.


This lecture discusses in detail the principles of using tables in HTML markup. This includes a tabular organization of text, a tabular coordinate grid, and graphics organized in tables.

Tools for describing tables in HTML

As the WWW developed, it became clear that the funds contained in HTML were not enough for high-quality display various types documents. The disadvantage of HTML was the lack of tools for displaying tables. For this purpose, preformatted text (tag 

), in which the table was outlined in ASCII characters.  But this form of table presentation was not enough high quality and stood out from the general style of the document.  After the introduction of tables in HTML, Webmasters had not just a tool for placing text and numerical data, but a powerful design tool for placing graphic images and text in the right place on the screen.


Creating tables in HTML


The tag is used to describe tables<ТАВLЕ>.  Tag<ТАВLЕ>, like many others, automatically translates the line before and after the table.


Creating a table row - tag<ТR>


Tag<ТR>(Table Row) creates a table row.  All text, other tags and attributes that need to be placed on one line must be placed between the lt;TR> tags.


Defining table cells - tag<ТD>


Cells with data are usually placed inside a table row.  Every cell containing text or image must be surrounded by tags<ТD>.  Number of tags<ТD>in a row defines the number of cells

 

 
Table

 

 

 

 If a table has two TR tags, then it has two rows.
 

 

 If there are three TD tags in a line,
 then in it
 three columns.
 

 

 



 
Table column headings - tag<ТН>


Headings for table columns and rows are set using the header tag<ТН>(TableHeader, table title).  These tags are similar<ТD>.  The difference is that the text enclosed between the tags<ТН>, is automatically written in bold and is placed in the middle of the cell by default.  You can cancel the centering and align the text to the left or right.  If you use<ТD>with tag<В>and attribute<АLIGN=center>, the text will also look like a title.  However, be aware that not all browsers support in tables bold type, so it's better to set table headers using<ТН>.

 

 

 

 Header is centered by default
 The header can join columns
 

 

 The header can be placed before the columns
 Text or data
 Text or data
 

 

 Header can concatenate lines
 Text or data
 Text or data
 

 

 Text or data
 Text or data
 

 

 Text or data
 Text or data
 

 




Using table headers - tag<САРТIОN>


Tag allows you to create table headers.  By default, headings are centered and placed either above (<САРТION АLIGN=top>), or under the table (<САРТION ALIGN=bottom>).  The title can consist of any text and images.  The text will be divided into lines corresponding to the width of the table.  Sometimes tag<САРТION>used to sign a picture.  To do this, it is enough to describe a table without borders.

 

 

 Header above table
 

 Text or data
 Text or data
 Text or data
 Text or data
 

 

 

 Heading below the table
 

 Text or data
 Text or data
 Text or data
 

 




NOWRAP attribute


Typically, any text that does not fit on one line of a table cell goes to next line.  However, when using the NOWRAP attribute with tags<ТН>or<ТD>The length of the cell is expanded so that the text contained within it fits on one line.


COLSPAN attribute


Tags<ТD>And<ТН>modified using the COLSPAN attribute (Column Span, column connection).  If you want to make a cell wider than the top or bottom, you can use the COLSPAN attribute to stretch it over any number of regular cells.

 

 

 

 

 If you want to make any cell wider than the top or bottom,
 you can use the COLSPAN=2 attribute,
 

 

 to stretch it over any number of regular cells.
 

 

 




ROWSPAN attribute


ROWSPAN attribute used in tags<ТD>And<ТН>, is similar to the COLSPAN= attribute, only it specifies the number of lines over which the cell is stretched.  If you specified a number greater than one in the ROWSPAN=s attribute, then the corresponding number of rows must be under the stretched cell.  It cannot be placed at the bottom of the table.


WIDTH attribute


The WIDTH attribute is used in two cases.  You can put it in a tag<ТАВLЕ>to give the width of the entire table, or can be used in tags<ТD>or<ТН>to set the width of a cell or group of cells.  The width can be specified in pixels or as a percentage.  For example, if you set in the tag<ТАВLЕ>WIDTH=250, you will get a table that is 250 pixels wide regardless of the page size on your monitor.  When setting WIDТН=50% in the tag<ТАВLЕ>the table will occupy half the width of the page at any image size on the screen.  So, when specifying the table width as a percentage, keep in mind that if the user has a narrow viewport, your page may look a little weird.  If you are using pixels and the table is wider than the viewing area, a scroll bar will appear at the bottom to move left and right on the page.  Depending on the tasks at hand, either method of setting the width of the table may be useful.

 

 

 

 Text or data - width 100%
 

 
 or 

 

 

 Text or data - width 50%
 

 
 or 

 

 

 Text or data - 200 pixels wide
 

 
 or 

 

 

 Text or data - 100 pixels wide
 

 




Applying empty cells


If a cell contains no data, it will have no borders.  If you want a cell to have borders but no content, you need to put something in it that won't be visible when viewed.  You can use an empty string<ВR>.  You can even specify empty columns by defining their width in pixels or relative units and not entering any data into the resulting cells.  This tool can be useful when placing text and graphics on a page.


CELLADDING attribute


This attribute determines the width of the empty space between the contents of the cell and its borders, that is, it sets the margins inside the cell.

 

 

 

 

 Text or data
 Text or data
 Text or data
 

 

 Text or data
 Text or data
 Text or data
 

 



 

 

 Text or data
 Text or data
 Text or data
 

 

 Text or data
 Text or data
 Text or data
 

 

 




ALIGN and VALIGN attributes


Tags<ТR>, <ТD>And<ТН>can be modified using the ALIGN and VALIGN attributes.  The ALIGN attribute determines whether text and graphics are aligned horizontally, that is, left or right, or centered.  Horizontal alignment can be set in several ways:


ALIGN=bleedleft presses the contents of the cell close to the left edge.


ALIGN=left Aligns the contents of the cell to the left, taking into account the indentation specified by the CELLPADDING attribute.


ALIGN=center Centers the contents of the cell.


ALIGN=right Aligns the contents of a cell to the right, taking into account the indentation specified by the CELLPADDING attribute.

 

 

 

 Text or data
 Text or data
 Text or data
 

 

 Text or data
 Text or data
 Text or data
 

 

 Text or data
 Text or data
 Text or data
 

 

 Text or data
 Text or data
 Text or data
 

 

 Text or data
 Text or data
 Text or data
 

 




The VALIGN attribute vertically aligns text and graphics within a cell.  Vertical alignment can be set in several ways:


VALIGN=top Aligns the contents of a cell to its top border.


VALIGN=middle Centers the contents of the cell vertically.


VALIGN=bottom Aligns the contents of a cell to its bottom border.

 

 

 

 

 The VALIGN attribute vertically aligns text and graphics within a cell.
 top,
 middle,
 bottom.
 

 

 VALIGN=top Aligns the contents of a cell to its top border.
 top,
 top,
 top.
 

 

 VALIGN=middle Centers the contents of a cell vertically.
 middle,
 middle,
 middle.
 

 

 VALIGN=bottom Aligns the contents of a cell to its bottom border.
 bottom,
 bottom,
 bottom.
 

 

 




BORDER attribute


In the tag<ТАВLЕ>often determine how the borders, that is, the lines surrounding the table cells and the table itself, will look.  If you do not specify a frame, you will get a table without lines, but space will be allocated for them.  The same result can be achieved by setting<ТАВLЕ ВОRDER=0>.  Sometimes you want to make the border thicker so that it stands out better.  You can set exceptionally bold borders to attract attention to a picture or text.  When creating nested tables, you have to make borders of different thicknesses for different tables to make them easier to distinguish.


CELLSPACING attribute


The CELLSPACING attribute specifies the width of the spaces between cells in pixels.  If this attribute is not specified, the default value is two pixels.  Using the CELLSPACING= attribute, you can place text and graphics wherever you need them.  If you want to leave an empty space, you can write a space in the cell.

 

 

 

 

 Text or data
 Text or data
 Text or data
 

 

 Text or data
 Text or data
 Text or data
 

 

 

 

 Text or data
 Text or data
 Text or data
 

 

 Text or data
 Text or data
 Text or data
 

 

 

 

 Text or data
 Text or data
 Text or data
 

 

 Text or data
 
 Text or data
 

 

 




BGCOLOR attribute


This attribute allows you to set the background color.  Depending on which tag (TABLE, TR, TD) it is used with, the background color can be set for the entire table, for a row, or for an individual cell.  The value of this attribute is the RGB code or standard name colors.

 

 

 

 

 Text or data
 Text or data
 Text or data
 

 

 Text or data
 Text or data
 Text or data
 

 

 




BACKGROUND attribute


This attribute specifies the background image for tables.  Applies to TABLE and TD tags.  Its meaning is File URL With background image.  The use of this attribute is discussed below.


Using tables in page design


The good thing about tables is that you can make their borders invisible if you want.  This allows using the tag<ТАВLЕ>beautifully place text and graphics on the page.  Bye tag<ТАВLЕ>remains the only powerful formatting tool in HTML.  Web page designers now have almost the same freedom regarding the use of white space as printed page designers.  Tables are the best way to move away from hierarchical placement of text on Web pages.


If the browser supports tables, it will usually correctly display most interesting effects obtained with their help

 

 

 

 

 
 
Ural State Pedagogical University

 
Welcome!

 

 

 Training course "Basics of WEB mastering"
 

 

 		
 

 

 



 
Creating colorful tables


Some browsers allow you to display colors.  There are several ways to color a table, mostly depending on the browser you are using.


Colored borders in Netscape Navigator.  Not only can you surround the table beautiful frame, but also set a color for it that is different from the text and background colors.  Create a simple gray GIF (or any GIF you would like to have as a background) and define it in a tag<ВODY>as a page background.  Then set the page background color.  As a result, your tag<ВОDY>will look something like this:

 

You have created a double background - GIF and a specified color.  As a result background color will be visible on all table borders and horizontal lines (<НR>).  Whether your background GIF is gray or not, the colored lines and table borders will stand out noticeably.  If the background GIF is not too complex, the page load time will only increase slightly.


Task

 
Create a table and specify its parameters (margins and distance between cells) through styles.

 
Solution

 
A table consists of rows and columns of cells that can contain text and pictures.  To add a table to a web page, use the tag 
.  This element serves as a container for elements that define the contents of the table.  Any table consists of rows and cells, which are specified respectively using tags And 
.  The table must contain at least one cell (example 1).  Allowed instead of tag use tag .  Text in a cell styled with a tag , is displayed by the browser in bold font and aligned to the center of the cell.  Otherwise, the differences between cells created through tags And No.


Example 1: Creating a table


HTML5 IE Cr Op Sa Fx

 

 
 
 Table tag
 
 
 

 

 Cell 1
 Cell 2
 

 

 Cell 3
 Cell 4
 

 

 

 
The order of the cells and their appearance is shown in Fig.  1.

 
Rice.  1. Result of creating a table with four cells

 
border tag attribute 
it is only allowed to add with an empty value ( 
) or equal to 1. All other values ​​are not validated.
To control the margins inside cells, use the padding style property, which is added to the td selector.  The distance between cells is changed by the border-spacing property (example 2) added to the table selector; the IE browser only understands it since version 8.0.
Example 2: Margins inside cells
HTML5 CSS 2.1 IE Cr Op Sa Fx

 

 
 
 Table tag
 
 
 
 

 
 
 

 
Heading 1Heading 2

 
Cell 3Cell 4

 

 

 
A table with fields and distance between cells is shown in Fig.  2. A similar result can be achieved using a white frame around the cells.

 

 
Rice.  2. Fields in table cells


Using the COLSPAN and ROWSPAN attributes, you can combine several adjacent cells of a column or row into one large cell.


COLSPAN tag attribute 

, allows you to merge cells of several columns within one row.


ROWSPAN attribute - cells of several rows within one column.


The number specified in these attributes indicates the number of cells that will be merged.


Because  When performing merge operations it is very easy to get confused, I strongly recommend making a preliminary sketch of the table on paper.


Example:




HTML code:



1111
22222
33333
44444
55555
66666
77777
88888
99999



Browser display:

1111

22222

33333


44444

55555

66666


77777

88888


99999




Improving the appearance of an HTML page table


The CELLSPACING attribute makes it possible to set the size of the strip of clean space that frames the table from the outside.  By default, the browser separates table cells with a 2-pixel stripe.


The CELLPADDING attribute specifies the size of the stripes of clear space within a cell, separating its contents from its outer borders.  By default this value is 1 pixel.


To graphic images, placed in adjacent table cells, looked like a single whole, you need to set the CELLSPACING and CELLPADDING attributes to zero values.

 
Displaying table borders of an html page


If the value of the tag's BORDER attribute 
is different from zero, the browser encloses the table in a frame and delimits adjacent rows and columns of the table.  Using the FRAME and RULES attributes, you can specify which parts of the table frames should be shown.
The FRAME attribute is used to define fragments of the external outline of the table.
RULES attribute - specifies a set of internal dividing lines.
The following are valid values ​​for these attributes.
FRAME Value Result void All lines are missing above Line above the table below Line below the table rhs Line to the right of the table lhs Line to the left of the table hsides Lines above and below the table vsides Lines to the left and right of the table border All lines are present (default) RULES none All lines  missing cols Lines between columns rows Lines between rows groups Lines between groups of columns and rows all All lines present (default)
Example:







HTML code:



111
111
111
111
111
111



Browser display:

111

111

111


111

111

111




Wrapping words in table cells of an html page


By default, the browser automatically wraps text within table cells.  The NOWRAP attribute forcibly disables word wrapping within a table and displays the text in one line.  Therefore, it is recommended to use this attribute in relation to table cells containing short text, because  otherwise it will go outside the browser window.  It should be noted that this attribute has no effect on cell text formatted using tags 

, 

.

 
Nested tables of html pages


Nesting tables one inside another is a very common design technique. appearance Web pages.  First of all, you need to build a main table, and then place child tables in its cells.  When defining tables, you must remember to include in their description all closing tags that contain a slash character, because  omitting just one such descriptor will distort the table dramatically.


You should also not abuse the investment, because...  in this case, the loading of the page by the browser slows down significantly.


Nested tables are formatted using general rules, which actually makes the page attractive.


Example:

And which are used to create strings, and paired tags,  responsible for creating cells.  ( Moreover, the closing tags of rows and cells may be missing)
So, given that we already know how to create simplest HTML table, let's apply the information above and create a simple table as shown in (Figure 1).





The simplest table Fig. 1 



Code the simplest table
, which is shown in Figure 1 (above)

 


HTML code:



111
111



01
01
01
01
111
111
111



Browser display:

111

111


 
01

 01


01

 01




111

111

111






Tables in HTML are the most powerful and frequently used tool.  Basically, webmasters use tables not only as a method of grouping data display, but also to format web pages.


Let's look at both methods using HTML tables.  But first, we'll learn how to add tables to an HTML document, and also look at the capabilities that HTML gives us for working with tables.


Creating a simple HTML table


Every table in HTML consists of many cells that are arranged in rows.  And all these lines form a whole table.  A paired tag is used to designate a table 
And
.


As you already know, tables consist of rows and cells.  And in order to create a simple table, we need two more tags: these are paired tags 
And























1-Table cell2-Table cell3-Table cell4-Table cell
5-Table cell6-Table cell7-Table cell8-Table cell
9-Table cell10-Table cell11-Table cell12-Table cell


Complex table code, example in Figure 2

 











  
 Merging columns "Attribute" colspan" Concatenating strings Attribute " rowspan" 
 
 Attribute " valign""top" 
 Attribute " valign" "bottom" 
  


The resulting table is Figure 1
.  looks ugly.  All this is because the tags that we used to create the simplest table ( 
, , And 
1) Tag attribute 
"height".  Please note that the tag there is no "width" attribute because the tag is responsible for the line, and, accordingly, for the height.  And the columns are responsible for the width.  Even though the tag has the "height" attribute, but it is practically not used anywhere anymore.
Tag attributes 
).
3) Tag attribute 
), may have various attributes that must be specified: this could be background, borders, dimensions, and so on.


Let's now look at the attributes that apply to the tag 
And
.  In order to see how the table with applied to the tag will change attributes, copy the table code and place it in text document, with the .html extension and open it in a browser, adding attributes to the table code and refreshing the page, you will see how your table will look in the browser.
Tag attributes: 


1) The "border" attribute specifies the width of the border of the entire table in pixels, written like this: 


 
.


2) Attributes "width" and "height" - this attribute specifies the recommended width and height of your table, written like this: 
 


3) The "bordercolor" attribute - sets the border color of the entire table, written like this: 
 
.


4) The "align" attribute - table alignment, align=left - the table will be aligned to the left, align=right - to the right, written like this: 
 


5) Attribute "bgcolor" - sets the background color of the table, written like this: 
 


I think the attributes are enough for you!


Now let's look at the tag attributes: 


Tag attributes 






2) Tag attribute 
"width", the "height" attribute of the tag no, because tag is responsible for the table cell and its width, and the row (tag) is responsible for the height 

"colspan".  The value of this attribute indicates the number of columns that occupies this cell.  In other words, this attribute allows you to combine several adjacent cells vertically into one.


4) Tag attribute 
"rowspan".  The value of this attribute indicates the number of rows that this cell occupies.  Accordingly, this attribute allows you to combine several cells into one horizontally.


5) Tag attribute 
"align".  This attribute allows you to align elements within a cell horizontally.  It has three values: "left" (along the left edge of the cell), "center" (in the center), "right" (along the right edge of the cell).  If nothing is specified, the alignment will be left.


6) Tag attribute 
"valign".  This attribute allows you to vertically align elements within a cell.  Just like “align”, it has only three meanings: “top” (at the top), “middle” (in the middle), “bottom” (at the bottom).  The default value is "middle" in the middle.


Let's apply what we've learned so far.


Figure 2 shows our complex table.




Complex table Fig. 2




That’s basically all you need to know about HTML tables and use them successfully.


Creation html tables in the Joomla editor.


To create a table in Joomla you can use TinyMce editor which is in Joomla by default.


Now using the Joomla visual editor, you can create simple or complex versions of tables, but be careful and do not forget about the width of the area for content on your site, so that when creating a table its width does not exceed this value.


Download files:


Video course on HTML from Evgeny Popov


The free video course contains 33 lessons on HTML.


The video course reveals basic knowledge of HTML and will be useful not only for beginner site builders who are not yet familiar with HTML, but also for more experienced webmasters.