[Draft Idea/Spec/Proposal] Formatting a table in css like excel

Hi all!

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

Solution

A solution would be to manipulate the table element of the html according to the position of the content like excel does

sample: index.html

<!DOCTYPE html>
<html>
<head>
<style>
a1:a2 {
  background: red;
}

a3: a5 {
  background: blue;
}

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>

syntax

sample1: concept

StartPosition:EndPosition {
 property: value;
}

sample 2: styles.css

a1: a2{
 property: value;
}

benefits

  1. don’t need id, class
  2. is fast
  3. easy and didactic to handle
  4. look like something you know
  5. is limited by the amount of content

If you need to convert an excel document to web format, an interesting alternative would be in my opinion … convert to html with the style in css, what I’m talking about here … is to have a syntax similar to excel to style the table which facilitates web excel formats with css-excel-stylish style