ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

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
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
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 the HTML Table control: the control is selected.
  2. Click the HTML Table control again: the controls switches to edit mode and a yellow border appears around the control.
  3. Click the desired cell. The cell is selected: hatch marks appear 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 the HTML Table control: the control is selected.
  2. Click the HTML Table control again: the controls switches to edit mode and a yellow border appears around the control.
  3. Select the desired row or column. The row or the column is selected: hatch marks appear.
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 enlarging or reducing all the table rows/columns proportionally: simply reduce or enlarge the table using the handles.
  • by enlarging or reducing the size of the last table row/column: simply reduce or enlarge the table in edit mode (surrounded by the yellow frame) by clicking the border of the last row or column.
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: 05/29/2024

Send a report | Local help