Lesson 18 / الدرس 18

Tables: the basics / الجداول: الأساسيات

A table is a grid of rows and cells for data that truly has rows and columns — not a tool for arranging the page.

الجدول شبكة من الصفوف والخلايا للبيانات التي فيها فعلًا صفوف وأعمدة — وليس أداة لترتيب الصفحة.

A table lays out data in rows and columns, the way you would on paper: a price list, a class schedule, a comparison of two products. HTML builds one from three tags: <table> wraps the whole grid, <tr> is one row, and <td> is one cell inside that row.

الجدول يعرض البيانات في صفوف وأعمدة، تمامًا كما تفعل على الورق: قائمة أسعار، أو جدول حصص، أو مقارنة بين منتجين. وتبنيه HTML من ثلاثة وسوم: <table> يحيط بالشبكة كلها، و <tr> صف واحد، و <td> خلية واحدة داخل ذلك الصف.

<table>
    <tr>
        <td>Dates (1kg)</td>
        <td>5 JD</td>
    </tr>
    <tr>
        <td>Honey (500g)</td>
        <td>7 JD</td>
    </tr>
</table>

Two rows, two cells each — a small price list. Every <tr> should hold the same number of cells as the others so the grid lines up.

صفان، وفي كل صف خليتان — قائمة أسعار صغيرة. يجب أن يحمل كل <tr> عدد الخلايا نفسه الذي تحمله بقية الصفوف حتى تصطف الشبكة.

Header cells: th

A plain <td> is a data cell. A <th> is a header cell — it labels the column or row under it. The browser shows it bold and centered by default, but the real reason to use it is for a screen reader: it announces "Price, header" and then connects every cell below it back to that label as the visitor moves through the table.

الخلية العادية <td> خلية بيانات. أما <th> فهي خلية عنوان — تسمّي العمود أو الصف الذي تحته. يعرضها المتصفح افتراضيًا عريضة وفي المنتصف، لكن السبب الحقيقي لاستخدامها هو قارئ الشاشة: فهو يعلن "Price, header" ثم يربط كل خلية تحتها بذلك العنوان أثناء تنقّل الزائر في الجدول.

<table>
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Dates (1kg)</td>
        <td>5 JD</td>
    </tr>
    <tr>
        <td>Honey (500g)</td>
        <td>7 JD</td>
    </tr>
</table>

The same price list, now with a real header row. "Product" and "Price" are <th>, not <td>.

قائمة الأسعار نفسها، والآن معها صف عنوان حقيقي. "Product" و "Price" هما <th> لا <td>.

الجدول للبيانات التي فيها صفوف وأعمدة حقيقية فعلًا — وليس أبدًا لترتيب الصفحة نفسها. وضع قائمة طعام في <td>، وصورة في التالي، وقائمة أسعار في ثالث، لترتيب صفحة كاملة، كان أمرًا شائعًا يومًا، حين كانت CSS عاجزة عن ذلك. أما اليوم فهذا يُفسد الصفحة: يعلن قارئ الشاشة أشياء لا معنى لها مثل "صف 1 من 1، عمود 3 من 3" فوق محتوى ليس جدوليًا أصلًا، والشبكة الثابتة لا تتكيّف مع شاشة الهاتف. إن احتجت إلى ترتيب محتوى في الصفحة، فاستخدم CSS لذلك — فتلك ليست مهمة <table>.

When to use a table — and when not to

Use a table when the content really has rows and columns: prices, schedules, comparisons.
Avoid a table when you just want to place things next to each other on the page — that is CSS's job.
Ask yourself: would a person read this data by row and column? If not, it probably is not a table.

Tag	What it does
<table>	Wraps the whole grid
<tr>	One row
<td>	One data cell
<th>	One header cell

The tags used in this lesson.

Try it live / جرّب بنفسك

<h1>This week's prices</h1>

<table>
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Write an item here</td>
        <td>Write a price here</td>
    </tr>
</table>

Preview / المعاينة

Check yourself / اختبر نفسك

1. Which tag wraps one row of a table?

2. What is the real reason to use <th> instead of <td> for a column heading?

ما السبب الحقيقي لاستخدام <th> بدل <td> لعنوان عمود؟

3. You want three things side by side on the page: a menu, a photo, and a price list. What should you use?

Your task / مهمتك

Build a real data table: a weekly price list or class schedule with at least three rows and two columns. Give it a header row with <th>, and use <td> for the data.

ابنِ جدول بيانات حقيقيًا: قائمة أسعار أسبوعية أو جدول حصص، بثلاثة صفوف وعمودين على الأقل. أعطه صف عنوان بـ <th>، واستخدم <td> للبيانات.

One <table> with at least three <tr> <table> واحد فيه ثلاثة <tr> على الأقل
A header row using <th>, not <td> صف عنوان باستخدام <th> لا <td>
Every row has the same number of cells كل صف فيه عدد الخلايا نفسه
The table holds real tabular data, not page layout الجدول يحمل بيانات جدولية حقيقية، لا ترتيب صفحة