8 files changed, 193 insertions, 19 deletions
diff --git a/sources/pyside6/doc/tutorials/basictutorial/clickablebutton.rst b/sources/pyside6/doc/tutorials/basictutorial/clickablebutton.rst
index bd45f1f64..e81e4964a 100644
--- a/sources/pyside6/doc/tutorials/basictutorial/clickablebutton.rst
+++ b/sources/pyside6/doc/tutorials/basictutorial/clickablebutton.rst
@@ -1,5 +1,5 @@
-A Simple Button Tutorial
-************************
+Using a Simple Button
+=====================
 
 In this tutorial, we'll show you how to handle **signals and slots**
 using Qt for Python. **Signals and slots** is a Qt feature that lets
diff --git a/sources/pyside6/doc/tutorials/basictutorial/dialog.rst b/sources/pyside6/doc/tutorials/basictutorial/dialog.rst
index 04f6ffa5d..da3b336cd 100644
--- a/sources/pyside6/doc/tutorials/basictutorial/dialog.rst
+++ b/sources/pyside6/doc/tutorials/basictutorial/dialog.rst
@@ -1,5 +1,5 @@
-Creating a Simple PySide6 Dialog Application
-*********************************************
+Creating a Dialog Application
+=============================
 
 This tutorial shows how to build a simple dialog with some
 basic widgets. The idea is to let users provide their name
@@ -43,7 +43,7 @@ just sets the title of the dialog window. In `main()`, you can see
 that we are creating a *Form object* and showing it to the world.
 
 Create the Widgets
-===================
+------------------
 
 We are going to create two widgets: a `QLineEdit` where users can
 enter their name, and a `QPushButton` that prints the contents of
@@ -59,7 +59,7 @@ It's obvious from the code that both widgets will show the corresponding
 texts.
 
 Create a layout to organize the Widgets
-========================================
+---------------------------------------
 
 Qt comes with layout-support that helps you organize the widgets
 in your application. In this case, let's use `QVBoxLayout` to lay out
@@ -68,18 +68,14 @@ after creating the widgets:
 ::
 
     # Create layout and add widgets
-    layout = QVBoxLayout()
+    layout = QVBoxLayout(self)
     layout.addWidget(self.edit)
     layout.addWidget(self.button)
-    # Set dialog layout
-    self.setLayout(layout)
 
-So, we create the layout, add the widgets with `addWidget()`,
-and finally we say that our **Form** will have our `QVBoxLayout`
-as its layout.
+So, we create the layout, add the widgets with `addWidget()`.
 
 Create the function to greet and connect the Button
-====================================================
+---------------------------------------------------
 
 Finally, we just have to add a function to our custom **Form**
 and *connect* our button to it. Our function will be a part of
@@ -106,7 +102,7 @@ Once executed, you can enter your name in the `QLineEdit` and watch
 the console for greetings.
 
 Complete code
-=============
+-------------
 
 Here is the complete code for this tutorial:
 ::
diff --git a/sources/pyside6/doc/tutorials/basictutorial/qml.rst b/sources/pyside6/doc/tutorials/basictutorial/qml.rst
index c972daa00..15fd1da75 100644
--- a/sources/pyside6/doc/tutorials/basictutorial/qml.rst
+++ b/sources/pyside6/doc/tutorials/basictutorial/qml.rst
@@ -1,5 +1,5 @@
-Your First Application Using PySide6 and QtQuick/QML
-*****************************************************
+Your First QtQuick/QML Application
+**********************************
 
 QML is a declarative language that lets you develop applications
 faster than with traditional languages. It is ideal for designing the
diff --git a/sources/pyside6/doc/tutorials/basictutorial/tablewidget.png b/sources/pyside6/doc/tutorials/basictutorial/tablewidget.png
new file mode 100644
index 000000000..8eb1398a7
--- /dev/null
+++ b/sources/pyside6/doc/tutorials/basictutorial/tablewidget.png
diff --git a/sources/pyside6/doc/tutorials/basictutorial/tablewidget.rst b/sources/pyside6/doc/tutorials/basictutorial/tablewidget.rst
new file mode 100644
index 000000000..a041e4116
--- /dev/null
+++ b/sources/pyside6/doc/tutorials/basictutorial/tablewidget.rst
@@ -0,0 +1,97 @@
+Displaying Data Using a Table Widget
+====================================
+
+If you want to display data arranged in a table, use a ``QTableWidget`` to do
+so, without dealing with much configuration.
+
+Notice that using a ``QTableWidget`` is not the only path to display
+information in tables. You can also create a data model and display it using
+a ``QTableView``, but that is not in the scope of this tutorial.
+
+.. note:: This Widget is a ready-to-use version of something you can customize
+   further on. To know more about the Model/View architecture in Qt, refer to
+   its `official documentation <https://doc.qt.io/qt-6/model-view-programming.html>`_.
+
+1. Import ``QTableWidget``, ``QTableWidgetItem``, and ``QColor`` to display
+   background colors:
+
+   .. code-block:: python
+
+       import sys
+       from PySide6.QtGui import QColor
+       from PySide6.QtWidgets import (QApplication, QTableWidget,
+                                      QTableWidgetItem)
+
+2. Create a simple data model containing the list of names and hex codes for
+   different colors:
+
+   .. code-block:: python
+
+       colors = [("Red", "#FF0000"),
+                 ("Green", "#00FF00"),
+                 ("Blue", "#0000FF"),
+                 ("Black", "#000000"),
+                 ("White", "#FFFFFF"),
+                 ("Electric Green", "#41CD52"),
+                 ("Dark Blue", "#222840"),
+                 ("Yellow", "#F9E56d")]
+
+3. Define a function to translate the hex code into an RGB equivalent:
+
+   .. code-block:: python
+
+       def get_rgb_from_hex(code):
+           code_hex = code.replace("#", "")
+           rgb = tuple(int(code_hex[i:i+2], 16) for i in (0, 2, 4))
+           return QColor.fromRgb(rgb[0], rgb[1], rgb[2])
+
+4. Initialize the ``QApplication`` singleton:
+
+   .. code-block:: python
+
+       app = QApplication()
+
+5. Configure the ``QTableWidget`` to have a number of rows equivalent
+   to the amount of items from the ``colors`` structure, and a number of
+   columns with the members of one color entry, plus one.
+   You can set the column name using the ``setHorizontalHeaderLabels`` as
+   described below:
+
+   .. code-block:: python
+
+       table = QTableWidget()
+       table.setRowCount(len(colors))
+       table.setColumnCount(len(colors[0]) + 1)
+       table.setHorizontalHeaderLabels(["Name", "Hex Code", "Color"])
+
+   .. note:: the reason of using ``+ 1`` is to include a new column where
+      we can display the color.
+
+6. Iterate the data structure, create the ``QTableWidgetItems`` instances, and
+   add them into the table using a ``x, y`` coordinate. Here the data is being
+   assigned row-per-row:
+
+   .. code-block:: python
+
+       for i, (name, code) in enumerate(colors):
+           item_name = QTableWidgetItem(name)
+           item_code = QTableWidgetItem(code)
+           item_color = QTableWidgetItem()
+           item_color.setBackground(get_rgb_from_hex(code))
+           table.setItem(i, 0, item_name)
+           table.setItem(i, 1, item_code)
+           table.setItem(i, 2, item_color)
+
+7. Show the table and execute the ``QApplication``.
+
+   .. code-block:: python
+
+       table.show()
+       sys.exit(app.exec_())
+
+
+The final application will look like this:
+
+.. image:: tablewidget.png
+    :alt: QTableWidget example
+    :align: center
diff --git a/sources/pyside6/doc/tutorials/basictutorial/treewidget.png b/sources/pyside6/doc/tutorials/basictutorial/treewidget.png
new file mode 100644
index 000000000..077eb5830
--- /dev/null
+++ b/sources/pyside6/doc/tutorials/basictutorial/treewidget.png
diff --git a/sources/pyside6/doc/tutorials/basictutorial/treewidget.rst b/sources/pyside6/doc/tutorials/basictutorial/treewidget.rst
new file mode 100644
index 000000000..26f29e1f0
--- /dev/null
+++ b/sources/pyside6/doc/tutorials/basictutorial/treewidget.rst
@@ -0,0 +1,79 @@
+Displaying Data Using a Tree Widget
+===================================
+
+If you want to display data arranged in a tree, use a ``QTreeWidget`` to do so.
+
+Notice that using a ``QTreeWidget`` is not the only path to display
+information in trees. You can also create a data model and display it using a
+``QTreeView``, but that is not in the scope of this tutorial.
+
+.. note:: This Widget is a ready-to-use version of something you can customize
+   further on. To know more about the Model/View architecture in Qt, refer to
+   its `official documentation <https://doc.qt.io/qt-6/model-view-programming.html>`_.
+
+1. Import ``QTreeWidget`` and ``QTreeWidgetItem`` for this application:
+
+   .. code-block:: python
+
+       import sys
+       from PySide6.QtWidgets import QApplication, QTreeWidget, QTreeWidgetItem
+
+2. Define a dictionary with project structures to display the information as a
+   tree, with files belonging to each project:
+
+   .. code-block:: python
+
+       data = {"Project A": ["file_a.py", "file_a.txt", "something.xls"],
+               "Project B": ["file_b.csv", "photo.jpg"],
+               "Project C": []}
+
+3. Initialize the ``QApplication`` singleton:
+
+   .. code-block:: python
+
+       app = QApplication()
+
+4. Configure the ``QTreeWidget`` to have two columns, one for the item name,
+   and the other for item type information of the files in the project
+   directories.
+   You can set the column name with the ``setHeaderLabels`` as described below:
+
+   .. code-block:: python
+
+       tree = QTreeWidget()
+       tree.setColumnCount(2)
+       tree.setHeaderLabels(["Name", "Type"])
+
+5. Iterate the data structure, create the ``QTreeWidgetItem`` elements, and add
+   the corresponding children to each parent.
+   We also extract the extension name for only the files and add them
+   into the second column.
+   In the constructor, you can see that each element (``QTreeWidgetItem``) is
+   added to different columns of the tree (``QTreeWidget``).
+
+   .. code-block:: python
+
+       items = []
+       for key, values in data.items():
+           item = QTreeWidgetItem([key])
+           for value in values:
+               ext = value.split(".")[-1].upper()
+               child = QTreeWidgetItem([value, ext])
+               item.addChild(child)
+           items.append(item)
+
+       tree.insertTopLevelItems(0, items)
+
+7. Show the tree and execute the ``QApplication``.
+
+   .. code-block:: python
+
+       tree.show()
+       sys.exit(app.exec_())
+
+
+The final application will look like this:
+
+.. image:: treewidget.png
+    :alt: QTreeWidget example
+    :align: center
diff --git a/sources/pyside6/doc/tutorials/basictutorial/widgetstyling.rst b/sources/pyside6/doc/tutorials/basictutorial/widgetstyling.rst
index 8deef1d7f..6c83c1fbf 100644
--- a/sources/pyside6/doc/tutorials/basictutorial/widgetstyling.rst
+++ b/sources/pyside6/doc/tutorials/basictutorial/widgetstyling.rst
@@ -1,5 +1,7 @@
-Widget Styling
-**************
+.. _widgetstyling:
+
+Styling the Widgets Application
+===============================
 
 Qt Widgets application use a default theme depending on the platform.
 In some cases, there are system-wide configurations that modify the Qt theme,
@@ -81,7 +83,7 @@ page.
 .. _`Qt Style Sheet Examples`: https://doc.qt.io/qt-5/stylesheet-examples.html
 
 Qt Style Sheets
-===============
+---------------
 
 .. warning::