1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
---
layout: default
title: Table Extension
description: The TableExtension adds the ability to create tables in CommonMark documents
redirect_from: /extensions/tables/
---
# Table Extension
_(Note: this extension is included by default within [the GFM extension](/2.7/extensions/github-flavored-markdown/))_
The `TableExtension` adds the ability to create tables in CommonMark documents.
## Installation
This extension is bundled with `league/commonmark`. This library can be installed via Composer:
```bash
composer require league/commonmark
```
See the [installation](/2.7/installation/) section for more details.
## Usage
Configure your `Environment` as usual and simply add the `TableExtension` provided by this package:
```php
use League\CommonMark\Environment\Environment;
use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
use League\CommonMark\Extension\Table\TableExtension;
use League\CommonMark\MarkdownConverter;
// Define your configuration, if needed
$config = [
'table' => [
'wrap' => [
'enabled' => false,
'tag' => 'div',
'attributes' => [],
],
'alignment_attributes' => [
'left' => ['align' => 'left'],
'center' => ['align' => 'center'],
'right' => ['align' => 'right'],
],
],
];
// Configure the Environment with all the CommonMark parsers/renderers
$environment = new Environment($config);
$environment->addExtension(new CommonMarkCoreExtension());
// Add this extension
$environment->addExtension(new TableExtension());
// Instantiate the converter engine and start converting some Markdown!
$converter = new MarkdownConverter($environment);
echo $converter->convert('Some Markdown with a table in it');
```
## Syntax
This package is fully compatible with [GFM-style tables](https://github.github.com/gfm/#tables-extension-):
### Simple
Code:
```markdown
th | th(center) | th(right)
---|:----------:|----------:
td | td | td
```
Result:
```html
<table>
<thead>
<tr>
<th align="left">th</th>
<th align="center">th(center)</th>
<th align="right">th(right)/th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">td</td>
<td align="center">td</td>
<td align="right">td</td>
</tr>
</tbody>
</table>
```
### Advanced
```markdown
| header 1 | header 2 | header 2 |
| :------- | :------: | -------: |
| cell 1.1 | cell 1.2 | cell 1.3 |
| cell 2.1 | cell 2.2 | cell 2.3 |
```
## Configuration
### Wrapping Container
You can "wrap" the table with a container element by configuring the following options:
- `enabled`: (`boolean`) Whether to wrap the table with a container element. Defaults to `false`.
- `tag`: (`string`) The tag name of the container element. Defaults to `div`.
- `attributes`: (`array`) An array of attributes to apply to the container element. Defaults to `[]`.
For example, to wrap all tables within a `<div class="table-responsive">` container element:
```php
$config = [
'table' => [
'wrap' => [
'enabled' => true,
'tag' => 'div',
'attributes' => ['class' => 'table-responsive'],
],
],
];
```
### Alignment
You can configure the HTML attributes used for alignment via the `alignment_attributes` option. For example, if you wanted Bootstrap classes to be applied, you could do so like this:
```php
$config = [
'table' => [
'alignment_attributes' => [
'left' => ['class' => 'text-start'],
'center' => ['class' => 'text-center'],
'right' => ['class' => 'text-end'],
],
],
];
```
Or you could use inline styles:
```php
$config = [
'table' => [
'alignment_attributes' => [
'left' => ['style' => 'text-align:left'],
'center' => ['style' => 'text-align:center'],
'right' => ['style' => 'text-align:right'],
],
],
];
```
Or any other HTML attributes you'd like!
## Credits
The Table functionality was originally built by [Martin HasoĊ](https://github.com/hason) and [Webuni s.r.o.](https://www.webuni.cz) before it was merged into the core parser.
|
