[csswg-drafts] Formatting a table "<table></table>" in css like excel (#7543)

raphael-louis-andress has just created a new issue for https://github.com/w3c/csswg-drafts:

== Formatting a table "<table></table>" in css like excel ==
#### 1. Problem
Manipulating a table in css can be tricky if you have a lot of information, you need a class or id in most cases

#### 2. Solution
A solution would be to manipulate the table element of the html according to the position of the content like excel does. This can be done with a pseudoselector I call a data-to-table sorter.

#### 2.1 before.html
```html
<!DOCTYPE html>
<html>
<head>
<style>

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
</body>
</html>
```

#### 2.2 after.html
```html
<!DOCTYPE html>
<html>
<head>
<style>
a1:a2 {
  background: red;
}

a3: a5 {
  background: blue;
}

</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
</body>
</html>
```

#### 2.3 syntax 
```
a1: a2{
 property: value;
}
```

#### 2.4 concept
```css
StartPosition:EndPosition {
 property: value;
}
```

#### 2.5 why?
1. don’t need id, class
2. "is fast", "easy"
3. easy and didactic to handle
4. look like something you know, something excel in css
5. is limited by the amount of content

#### 3. Reference
- https://discourse.wicg.io/t/draft-idea-spec-proposal-formatting-a-table-in-css-like-excel/5868

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7543 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 30 July 2022 04:55:30 UTC