All about html tables. Example: Using the rowspan attribute


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 presenting tables was not of high enough 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 uncenter the text 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, keep in mind that not all browsers support bold font in tables, so it is better to set table headings 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 row of a table cell moves to the next row.  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 across 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.  To attract attention to a picture or text, you can set exclusively bold borders.  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 color name.

 

 

 

 

 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 value is the URL of the file 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 with regard to the use of white space as web page creators. printed pages.  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.


What is a table?


A table is a structured set of data made up of rows and columns ( tabular data).  A table allows you to quickly and easily look up values ​​that indicate some kind of connection between different types of data, for example a person and their age, or a day of the week, or the timetable for a local swimming pool.




Tables are very commonly used in human society, and have been for a long time, as evidenced by this US Census document from 1800:




It is therefore no wonder that the creators of HTML provided a means by which to structure and present tabular data on the web.


How does a table work?


The point of a table is that it is rigid.  Information is easily interpreted by making visual associations between row and column headers.  Look at the table below for example and find a Jovian gas giant with 62 moons.  You can find the answer by associating the relevant row and column headers.

Data about the planets of our solar system (Planetary facts taken from Nasa's Planetary Fact Sheet - Metric. 


 Name
 Mass (10-24 kg)
 Diameter (km)
 Density (kg/m 3)
 Gravity (m/s 2)
 Length of day (hours)
 Distance from Sun (10 6 km)
 Mean temperature (°C)
 Number of moons
 Notes

Terrestial planets
 Mercury
 0.330

 4,879

 5427

 3.7

 4222.6

 57.9

 167

 0

 Closest to the Sun

Venus
 4.87

 12,104

 5243

 8.9

 2802.0

 108.2

 464

 0

 


Earth
 5.97

 12,756

 5514

 9.8

 24.0

 149.6

 15

 1

 Our world

Mars
 0.642

 6,792

 3933

 3.7

 24.7

 227.9

 -65

 2

 The red planet

Jovian planets
 Gas giants
 Jupiter
 1898

 142,984

 1326

 23.1

 9.9

 778.6

 -110

 67

 The largest planet

Saturn
 568

 120,536

 687

 9.0

 10.7

 1433.5

 -140

 62

 


Ice giants
 Uranus
 86.8

 51,118

 1271

 8.7

 17.2

 2872.5

 -195

 27

 


Neptune
 102

 49,528

 1638

 11.0

 16.1

 4495.1

 -200

 14

 


Dwarf planets
 Pluto
 0.0146

 2,370

 2095

 0.7

 153.3

 5906.4

 -225

 5

 Declassified as a planet in 2006, but this remains controversial.

When done correctly, even blind people can interpret tabular data in an HTML table - a successful HTML table should enhance the experience of sighted and visually impaired users alike.


Table styling


Take the following simple example:

 

 

 Data 1
 Data 2
 

 

 Calcutta
 Orange
 

 

 Robots
 Jazz
 




Which gives us the following result:


Data 1
 Data 2

Calcutta
 Orange

Robots
 Jazz

This isn't ideal, as we have to repeat the styling information across all three cells in the column (we probably have a class set on all three in a real project and specify the styling in a separate stylesheet).  Instead of doing this, we can specify the information once, on a element. elements are specified inside a container just below the opening 
tag.  We could create the same effect as we see above by specifying our table as follows:

 

 
 
 
 
 

 Data 1
 Data 2
 

 

 Calcutta
 Orange
 

 

 Robots
 Jazz
 




Effectively we are defining two "style columns", one specifying styling information for each column.  We are not styling the first column, but we still have to include a blank element - if we didn't, the styling would just be applied to the first column also.


If we wanted to apply the styling information to both columns, we could just include one element with a span attribute on it, like this:

 
 


Just like colspan and rowspan , span takes a unitless number value that specifies the number of columns you want the styling to apply to.


Active learning: colgroup and col


Now it's time to have a go yourself.


Below you can see the timetable of a languages ​​teacher.  On Friday she has a new class teaching Dutch all day, but she also teaches German for a few periods on Tuesday and Thursdays.  She wants to highlight the columns containing the days she is teaching.


Recreate the table by following the steps below.


  1. First, make a local copy of our timetable.html file in a new directory on your local machine.  The HTML contains the same table you saw above, minus the column styling information.
    2. 
 
  2. Add a element at the top of the table, just underneath the tag, in which you can add your elements (see the remaining steps below).
  3. The first two columns need to be left unstyled.
  4. Add a background color to the third column.  The value for your style attribute is background-color:#97DB9A;
  5. Set a separate width on the fourth column.  The value for your style attribute is width: 42px;
  6. Add a background color to the fifth column.  The value for your style attribute is background-color: #97DB9A;
  7. Add a different background color plus a border to the sixth column, to signify that this is a special day and she"s teaching a new class. The values ​​for your style attribute are background-color:#DCC48E; border:4px solid #C1437A  ;
  8. The last two days are free days, so just set them to no background color but a set width;  the value for the style attribute is width: 42px;
    9. See how you get on with the example.  If you get stuck, or want to check your work, you can find our version on GitHub as timetable-fixed.html (see it live also).
    Summary
    That just about wraps up the basics of HTML Tables.  In the next article we will look at some slightly more advanced table features, and start to think how accessible they are for visually impaired people.
    Simple HTML table source code
    
 
 
 
 
 
 




 


















      
     Cell 1 Cell 2 Cell 3 
     
     Cell 4 Cell 5 Cell 6 
     
     Cell 7 Cell 8 Cell 9 
     
    

    HTML Table Headers
    

    There are 2 types of cells in HTML tables.  The tag defines a cell of normal type.  If a cell acts as a header, it is defined using the .
    


    Example HTML table with header th
    

    Volkswagen AG
Daimler AG
BMW Group

    Audi
Mercedes-Benz
BMW

    Skoda
Mercedes-AMG
Mini

    Lamborghini
Smart
Rolls-Royce

    HTML table source code with th headers
    
 






















      
     Volkswagen AG Daimler AG BMW Group 
     
     Audi Mercedes-Benz BMW 
     
     Skoda Mercedes-AMG Mini 
     
     Lamborghini Smart Rolls-Royce 
     
    

    Merging cells in an HTML table
    

    HTML tables have the ability to merge cells horizontally and vertically.
    

    To merge cells horizontally use the colspan=" attribute X" , at the cell or , where x 
    

    To merge cells vertically use the rowspan=" attribute X" , at the cell or , where x- number of cells to merge.
    

    Cells can be merged horizontally and vertically at the same time.  To do this, use both the colspan and rowspan attributes for the desired cell:
    
 Cell text

    Please note that when you merge cells, the number of elements in the row changes.  For example, if a table has 3 columns with cells, and we merge the first and second cell, then everything inside the tag defining this line there will be 2 elements, the first of them will contain the colspan="2" attribute.
    

    Example HTML table with merging cells
    

    HTML table source code with merged cells
    
 




























      
     Nissan 
     
     Model Equipment Availability 
     
     Nissan Qashqai VISIA + 
     
     TEKNA + 
     
     Nissan X-Trail ACENTA + 
     
     CONNECTA - 
     
    

    Headers and footers in HTML tables
    

    HTML tables can be divided into 3 areas: header, body, footer.
    

    This is done by wrapping the rows of the selected part of the table with tags.  defines the header area, - the footer area, - the main part of the table.
    

    By default, headers and footers are not styled differently (this can be done via CSS if necessary), but can be used by browsers.  For example, when printing a multi-page table, headers and footers may be duplicated on each printed page.
    

    The correct order of placing area tags in a table's HTML code is as follows: header first, followed by footer, then body.  In this case, the main part of the page will be displayed between the headers and footers.
    

    If necessary, you can add a signature to the table.  To do this, use the tag.
    

    Example HTML table with headers and footers
    

    Source code for table with headers and footers
    
 





































     Renault Sandero Stepway configurations  
     Characteristic SUTA 09H 6R SUTA 09HR6R SUTA 15H 5R 
           
     Availability + + + 
           
     Engine power 0.9 (90 hp) 0.9 (90 hp) 1.5 (90 hp) 
     
     Fuel petrol petrol diesel 
     
     Toxicity standard Euro 6 Euro 6 Euro 5 
     
    

    Columns and column groups
    

    An HTML table can be divided into columns and groups of columns using and tags.
    

    This division allows you to set styles for a table using a minimum number of CSS properties, thereby reducing the amount of table code (instead of defining styles for each cell of a column, you can set styles for one or several columns at once).
    

    Tags and are placed inside the tag before the tags, AKP6 (EDC)
    Transmission

    HTML table source code And 
    
 































           
     ZEN 2E2C AL A ZEN 2E2C J5 A INTENSE 2E3C AL A Characteristic 
     
     1.5 (90 hp) 1.2 (115 hp) 1.5 (90 hp) Engine power 
     
     diesel petrol diesel Fuel 
     
     Automatic transmission6 (EDC) Automatic transmission6 (EDC) Automatic transmission6 (EDC) Transmission 
     
    

    Tables in site page layout
    

    On modern websites, it is important that pages display correctly both on computers and mobile devices.  It is not advisable to use tables to create the skeleton of an HTML page, since the ability to adapt the content to the screens is lost different sizes(computers, smartphones, tablets).
    

    Table group tags are best used inside a page to display content in a tabular format.
    

    Hello, dear blog readers!  Often on web pages, in addition to text and pictures, there is a need to display various data in the form of tables.  Yes, this is understandable, the table is the most convenient way presentation of a large amount of information.  So the question arises “How to insert tables into html?”.  In this article I will answer this question and give you many examples of various html tables.
    

    How to create a table using HTML
    

    HTML tables are created in four steps.
    

    1. At the first step in the html code using the pair tag 
     we indicate to the browser that a table has been inserted into the web page: 
    

    .  The table element is a block element of a web page.  Therefore the table is always displayed with new line with vertical indentations from neighboring elements, so there is no need to put it in a paragraph.
    

    2. In the second step we form lines tables, placing paired tags 
 inside 
    .  Each element creates a separate line:
    





    

    

    

    

    

    3. Next, in the third step we form cells tables using paired tags 
 And 
, which are placed inside the element .  Tag creates regular cell, and cell header, i.e.  header of the corresponding column:
    











    

    


    

    


    

    


    

    

    4. Well, at the last step we place them inside the elements And cell contents.  The HTML code for inserting a table into a web page looks something like this:
    











    

    
Column 1Column 2Column 3

    

    
Cell 1-1Cell 1-2Cell 1-3

    

    
Cell 2-1Cell 2-2Cell 2-3

    

    


    They will help you fine-tune the display of borders.  With it you can change the thickness and color of the frames, as well as change the type of borders.
    

    Text that needs to be placed inside cells does not need to be enclosed, but if the text is large, it can be broken into paragraphs by using the tag 
    If you need to somehow format the inserted text, you can use .
    

    In addition to text, we can place pictures in cells using the tag :
    

    

    The contents of the cell can even be another table.  In this case, creating a nested table is no different from creating a regular table.  Just between tags And tags are inserted 
    And
    , and rows and cells are inserted into it.
    

    There are some rules to keep in mind when creating tables:
    

    • only a tag is used to create a table ;
    • tag 
      • can only be inside a tag 
      

      ;
    • tags 
      • , any other tag content ignored by the browser;
    • table contents (text or pictures) can only be contained in tags 
      • 
 
      

      And can only be inside a tag 
      
And ;

    • table cells must have at least some content, otherwise the browser may not display them at all, but if some cell must be empty, then a non-breaking space (HTML literal) is usually placed in it;
      • 

    • table refers to block elements of a web page;
      • 

    • The sizes of the table and its cells depend on the content, i.e.  the table is stretched in width and height so that everything fits;
      • 

    • a small indentation is made between the borders of individual cells and between the border of each cell and its contents;
      • 

    • the text of the header cells (th element) is displayed in bold and centered;
      • 

    • Borders around the table and its cells are not drawn by default.
      • 

      Table title
      


      Let's start with a paired tag 
      ,
 which gives the table a title.  The title text goes inside this tag, which should be inside the tag .  And it doesn’t matter where in the html code of the table you place the tag .  Moreover, it is permissible to use no more than one element within the same table and it should go to html code right after the tag 
      , the browser will still display the header above the table and center it.  But usually the tag placed immediately after the opening tag :
      









      
This is a table

      
Cell 1.1Cell 1.2

      

      
Cell 2.1Cell 2.2

      

      

      Display:
      

      Table Sections
      

      An html table can be logically divided into parts - sections.  There are three types of sections:
      

      • header section, which contains the header cells that form the table header;
        • 

      • body section, in which cells with basic data are located;
        • 

      • completion section, into which cells with summary data are placed.
        • 

      The table header section is formed using a paired tag 
      .
      A body section is created with a paired tag 
      .  One html table can contain several body sections, which allows you to create building blocks to which uniform design styles can be applied.
      The termination section is formed by a paired tag 
      and within one container 
      


      there can only be one.
      All these paired tags must contain the tags 
      , which form lines related to the corresponding sections:
      

      




















      


      
Column 1Column 2Column 3

      
      


      
Cell 1.1Cell 1.2Cell 1.3

      

      
Cell 2.1Cell 2.2Cell 2.3

      
      


      
Outcome 1Outcome 2Outcome 3

      
      

      

      Merging table cells
      

      It remains to talk about the most important feature of tables - merging cells. Attributes are used to combine several cells into one colspan And rowspan tags 
      And .  The colspan attribute specifies the number of cells combined horizontally, and rowspan – vertically:
      













      

      
1.11.2-1.3

      

      
2.12.22.3

      

      
3.1-4.13.23.3

      

      
4.24.3
      

      

      Example result:
      

      1.1

1.2-1.3


      2.1

2.2

2.3


      3.1-4.1

3.2

3.3


      4.2

4.3


      When merging cells, it is important to check the number of cells in each row to ensure there are no errors.  Yes, the design 
      		replaces two cells, so the next line should have two tags , or the same design!  If the number of cells in all rows does not match, then empty extra cells will appear.
      

      An example of incorrect html code when merging cells:
      








      

      
cell 1.1cell 1.2

      

      
cell 2.1cell 2.2

      

      

      And the result displayed in the browser:
      

      Those.  If you analyze the html code, you will notice that the first line contains three cells, two of which are combined using the colspan attribute, and only two cells are added in the second line.  Therefore, a third empty cell appears in the second line.
      

      Tag attributes 
      In this post we have already encountered one tag attribute 
      

      .  With the border attribute, which specifies the thickness of the border in pixels.  By default it is 0 and therefore cells are displayed without a border by default.
      In addition to the border attribute, there are several other important attributes supported by the tag 
      

      .  Let's look at them.
      Attribute align- sets leveling tables on the page.  Can take the values ​​left, center, right, which set the alignment to the left, center and right, respectively.  Defaults to left.
      Attribute background, which sets the background image to the table.  Takes the address of the image file as its value.
      bgcolor— sets background color tables.  Can be used in conjunction with the background attribute.
      Attribute bordercolor sets frame color tables.
      Cellpadding— determines distance between the cell border and its contents.  Allows you to improve the readability of the table.  The value can be any positive number.
      Cellspacing- sets distance between outer cell borders.
      Let's talk about this how to insert table into html page
 I'll finish, just summarize:
      • tags are used to insert a table 
      








      — table designation, - adding a line and , completion section and body section - ;
    • to combine cells we use tag attributes 
      • 
.
      The closing tag is required.
      

      Attention: It is impossible to create a table without using all these tags.
      

      

      Now let's try to use the theory and create a table in practice.
      

      Exercise: create a table of one row with three columns.
      

      
 
      — cell insertion;

    • the table is block element web pages;
      • 

    • the contents of cells can be not only text, but also pictures and other tables;
      • 

    • a table can contain three types of sections: header section - 
      • 

      colspan and rowspan.

      That's all, in the next post I will talk about navigation tools on an html site.  To avoid missing this post, subscribe to my blog updates!  That's it, see you again!
      

      
 09.11.2015
      

      Hi all! 
      Let's continue learning the basics of HTML.  In this lesson I will tell you and show examples how to make a table in HTML.  We’ll also look at how you can set the color of the table cells, how to center the table, learn how to make a table border, etc. 
      HTML tables are often used in HTML to list some information.  Previously, tables were used to create the framework of web pages:
      

      

      ...but this is already in the past, since today there are more effective ways creating wireframes for a website with .  I often use a table on my blog or website, for example, like in .
      

      I think you understand why you need to learn how to create a table.
      

      What main tags does the table consist of?
      

      ○ tag TABLE

      It is the main container for creating a table, which contains other table elements such as columns and rows. 
      The closing tag is required.
      
 
      

      ○ tag TR

      

      Inside the container 
      ……
      

 rows are placed:
      

      Columns are created using a tag 
      

      
row -1 / column 1
column 2
column 3

      

      

      Exercise: create a table of three rows and three columns.
      

      
 
      

      
row -1 / column 1
column 2
column 3

      

      
row -2 / column 1
column 2
column 3

      

      
row -3 / column 1
column 2
column 3

      

      

      Is everything clear to you up to this point?  Who doesn't understand, raise your hand!  Yeah, we all understand, so let’s move on.
      

      Now let's look at the attributes for the table.
      

      *Attributes


      

      ○ Table Borders in HTML
      

      To make the table visible, go to the tag 
       applies attribute "border»
. 
      
 
      



      If the attribute value «
border»

“0”, the border will not be visible unless added to the tag 
      

       attribute "border", the border in the table will also not be visible.
      
 

Table borders in HTML - website



      


      

      
row -1 / column 1
column 2
column 3

      

      

      

      



      Result:
       Try changing the value in the attribute "border" on "10"
.

      ○How to merge cells in a table
      

      To combine cells in a table use attributes "colspan" and "rowspan" to the tag <
td>

 .
      

      • colspan - merging cells horizontally;
        • 

      • rowspan - merging cells vertically.
        • 

       
      		
 

      In the values, indicate how many cells you want to merge.
      
 
      

      
row 1 column 1

      

      
row 2 column 1
row 2 column 2

      

      

      Result:
      
 
      

      
row 1 column 1
row 1 column 2

      

      
row 2 column 1

      

      

      Result:
      

      More complex example:
      
 

Tables in HTML - website



      

      
row -1 / column 1
column 2
column 3

      

      
row -2 / column 1
column 2
column 3
column 4

      

      

      

      



      Result:
      

      ○ How to increase the space between table cells
      

      To increase the distance between the text and the cell border, add the attribute "cell padding" to tag 
      
 
      


      In the values ​​of the “cellpadding” attribute, specify the indentation distance
      
 
      

      

      
row 1 column 1
column 2

      

      

      Result:
      

      To increase the distance between cells in a table, use the attribute "cellspacing" to tag 
      
 
      


      In the attribute values "cellspacing" specify the distance between cells
      
 
      

      

      
row 1 column 1
column 2

      

      

      Result:
      

      ○ How to make an HTML table background
      

      To make an HTML table background use the to tag 
       And 
      
 
      

      

 the following attributes:
      

      • BGCOLOR – background color for the entire table or for each cell individually.  The color is specified by code or word.
        • 

      • BACKGROUND – the background in the table is filled with a picture.
        • 

       

Tables in HTML - website



      

      
row -1 / column 1
column 2
column 3

      

      
row -2 / column 1
column 2
column 3
column 4

      

      

      

      



      Result:
      

      ○ How to insert a picture into an HTML table
      

      To insert an image into an HTML table, between the tag 
      		
 insert tag 

.
      
 
      		

      

      
row 1 cell 1
cell 2


      

      

      Result:
      

      Values ​​are specified in pixels (px) or percentages (%)
      

      ○ Aligning content in an HTML table
      

      To align content in an HTML table, use the to tag 
      		
 attribute "align" And "valign"
:
      

      ALIGN– horizontal alignment of content in the table. 
      Values:
      

      • left
-
 push content to left side (default);
        • 

      • center
–
 install in the center;
        • 

      • right
-
 push content to right side
        • 

      VALIGN
 – vertical alignment contents in the table. 
      Values:
      

      • top
–
 press the contents to the top;
        • 

      • bottom
–
 press the contents to the bottom;
        • 

      • middle
–
 set content in the middle
        • 

             		text

      

      
default cell
Align the content horizontally along the right edge, vertically - press it to the bottom

      

      
Align the content horizontally along the left edge, vertically - press it to the top
Align the contents horizontally in the center, vertically - press them in the middle

      

      

      Result:
      

      ○ How to center an HTML table
      

      To center a table, you need to wrap the table with a tag 
      

:
      
 
      Table code
      

      
 
      

      

      
row -1 / column 1
column 2
column 3

      

      

      

      Additional and main tags for the table
      

      
 
      
Table for website


      
Title 1
Title 2
 
      
       

      
1
2
 
      

      

      Result:
      

      Now we're done with the tables.  You can now create a table of any complexity yourself.  Pin this lesson.  Try creating any table yourself. 
      I look forward to seeing you in the next lesson.  Subscribe to my blog updates.
      

      Previous post 
      
Next entry
Article rating:
1 Star2 Stars3 Stars4 Stars5 stars(No ratings yet)
Loading...
Share with friends:
Articles on a similar topic
Close
Find on the site
For example: types of drywall