ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

This content has been translated automatically.  Click here  to view the French version.
Help / Developing an application or website / Controls, windows and pages / Page / HTML table
  • Overview
  • Creating an HTML table
  • Using an HTML table
  • Handling an HTML table
  • Selecting a cell
  • Selecting a column or a row
  • Resizing an HTML table
  • Changing the number of cells in the table
  • Resizing the table
  • Editing the style of an HTML table
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
Others
Stored procedures
Overview
The HTML Table control allows you to create specific layouts in HTML pages. HTML tables cannot be used to position controls, but to present data.
For example, HTML tables enable you to create enumerations with borders and columns.
Creating an HTML table
To create an HTML table:
  • on the "Creation" tab, in the "Containers" group, click "HTML table". In the wizard, select the characteristics of the HTML table to create:
    • Number of rows.
    • Number of columns.
    • Style of table and alternation of rows and columns.
  • on the "Creation" tab, in the "Containers" group, click "HTML table" and select directly the number of rows and columns in the table. In the wizard, select the style characteristics for the table as well as the alternation of rows and columns.
Once the HTML table is created in the page, you can manipulate the table and its cells using the context menu.
Using an HTML table
A control can be included in each cell of an HTML table. The control and the cell have the same size. The control and the cells have the same border and background properties.
Several controls cannot be included in the same cell of an HTML table.
However, an HTML cell containing several controls can be included in a cell of an HTML table.
Handling an HTML table

Selecting a cell

To select an empty cell:
  1. Click on the HTML array field: the field is selected.
  2. Click again on the HTML array field: the field switches to editing mode and a yellow frame appears around the field.
  3. Click the desired cell. The cell is then selected: hatching appears in the cell.
In this case, the "Description" option of the context menu will open the description of the cell.
To select a cell associated with a control, simply select the control.
In this case, the "Description" option of the context menu will open the description of the control.
To access the description of the cell, simply select "Cell description".

Selecting a column or a row

To select a column or a row, you must:
  1. Click on the HTML array field: the field is selected.
  2. Click again on the HTML array field: the field switches to editing mode and a yellow frame appears around it.
  3. Select the desired row or column. The row or column is then selected: hatching appears.
The context menu allows you to:
  • split the selected element vertically or horizontally
  • merge the different parts of the selected element.
Resizing an HTML table

Changing the number of cells in the table

To change the number of cells in an HTML table, you can:
  • add individual rows or columns ("Insert row " or "Insert column" options in the context menu)
  • add several rows or columns ("Enlarge table" option the context menu)

Resizing the table

There are two ways to resize the table:
  • By proportionally enlarging or reducing all array rows/columns: simply reduce or enlarge the array using the field handles.
  • by expanding or reducing only the last row/column of the table: simply shrink or enlarge the table in edit mode (with the yellow frame displayed) by clicking on the edge of the last row or column of the table.
Editing the style of an HTML table
You can edit the characteristics of the border and background of the HTML table and the characteristics of each one of the cells ("Border, Bckgrd" tab of the description window).
You can also choose a WEBDEV style via the context menu.
See also
Minimum version required
  • Version 9
Comments
video html
https://youtu.be/RJHDt5BpOhA
amarildo
18 Nov. 2018

Last update: 01/16/2025

Send a report | Local help